Te quedaria nada mas componentizar un poco para que ande en cada uno.
El @keyframes es para generar animaciones en css. Yo le digo que vaya desde una opacity de 0 hasttahasta una opacity de 1. Es decir que no se vea nada, a que se vea. Opacidad es lo contrario a transparencia, con una opacidad en 0, estaría 100% transparente. El transform: translate(valorEjeX,valorEjeY) es el que se encarga del movimiento. Si vas jugando con los valores te va a quedar mas claro.
@keyframes gradual {
from{
filter: opacity(0);
transform: translate(100%,0);
}
to{
filter: opacity(1);
transform: }translate(0%,0);
}
}
.product-details {
;
box-shadow: 0 0 1rem 0.1rem black;
animation: gradual normal 1s;
display: flex;
align-items: center;
border-radius: 30px;
height: 100%;
width: 500px;
padding: 5px;
}
const productDetailsContainer = document.querySelector('.product-details-container');
const productDetails = document.querySelector('.product-details');
Array.from(document.querySelectorAll(".table-row")).forEach(row => {
row.addEventListener("click", e => {
const row_tr = e.target.parentNode
const first_td = Array.from(row_tr.children)[0].textContent; // td element
const second_td_text = Array.from(row_tr.children)[1].textContent;
const second_td_img_src = Array.from(row_tr.children)[1].children[0].src;
const details_div = document.createElement('div')
const newImg = document.createElement('img');
newImg.src = second_td_img_src;
const codigoProducto = document.createElement('div');
codigoProducto.classList.add("product-title")
codigoProducto.innerText = "From Codigo Producto: " + first_td
const nombre = document.createElement('p')
nombre.innerText = "This is my product: " + second_td_text
details_div.append(codigoProducto, nombre, newImg)
details_div.classList.add(`product-${first_td}`, 'details')
if (productDetails.children.length === 0) {
productDetails.classList.remove("hidden")
productDetails.appendChild(details_div)
} else {
productDetails.removeChild(productDetails.children[0])
productDetails.appendChild(details_div)
}
})
})
body {
display: flex;
padding: 10px;
}
.container {
margin: 0 20px;
border-radius: 10px;
box-shadow: 0 0 5px 1px black;
height: fit-content
}
@keyframes gradual {
from{
filter: opacity(0);
transform: translate(100%,0);
}
to{
filter: opacity(1);
transform: translate(0%,0);
}
}
.product-details {
;
box-shadow: 0 0 1rem 0.1rem black;
animation: gradual normal 1s;
display: flex;
align-items: center;
border-radius: 30px;
height: 100%;
width: 500px;
padding: 5px;
}
img {
width: 100%;
border-radius: 20px;
}
.hidden{
display: none;
}
.table-row {
cursor: pointer;
border-radius: 10px;
}
<body>
<div class="container">
<div class="table-container">
<table border="1">
<thead>
<tr>
<th>codigo producto</th>
<th>nombre</th>
<th>acciones</th>
</tr>
</thead>
<tbody>
<tr class="table-row">
<td>01</td>
<td>
guitarra acustica #1
<img class="hidden" src="https://upload.wikimedia.org/wikipedia/commons/4/4d/C.F._Martin_GRH_160_or_000-16RGT_cropped.png" alt="">
</td>
<td>[eliminar] [editar]</td>
</tr>
<tr class="table-row">
<td>02</td>
<td>
Box of Milk
<img class="hidden" src="https://i.pinimg.com/736x/65/62/25/656225106a0f1fd5b12b5d299ac48721.jpg" alt="">
</td>
<td>[eliminar] [editar]</td>
</tr>
<tr class="table-row">
<td>03</td>
<td>
guitarra acustica #3
<img class="hidden" src="https://m.media-amazon.com/images/I/71QWkR-IHEL._AC_SY879_.jpg" alt="">
</td>
<td>[eliminar] [editar]</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
<div class="product-details-container">
<div class="product-details hidden">
</div>
</div>
<script src="code.js" charset="utf-8"></script>
</body>