Skip to main content
se añadieron 256 caracteres en el cuerpo
Origen Enlace

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>

El @keyframes es para generar animaciones en css. Yo le digo que vaya desde una opacity de 0 hastta 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.

@keyframes gradual {
    from{
    filter: opacity(0)
    }
to{
    filter: opacity(1)
    }
    
    }
    
        .product-details {
          box-shadow: 0 0 1rem 0.1rem black;
          animation: gradual 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)
}

to{
filter: opacity(1)
}

}

.product-details {
  box-shadow: 0 0 1rem 0.1rem black;
  animation: gradual 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>

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 hasta 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>
Origen Enlace

El @keyframes es para generar animaciones en css. Yo le digo que vaya desde una opacity de 0 hastta 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.

Otras cosas que estan buenas para animar que podes probar

• filter: brightness(1); aumenta el brillo, uno es lo normal

• transform: scale(1); aumenta el tamaño, uno es lo normal

@keyframes gradual {
    from{
    filter: opacity(0)
    }
to{
    filter: opacity(1)
    }
    
    }
    
        .product-details {
          box-shadow: 0 0 1rem 0.1rem black;
          animation: gradual 1s;
          display: flex;
          align-items: center;
          border-radius: 30px;
          height: 100%;
          width: 500px;
          padding: 5px;
    
        }

Ademas le agregue un box-shadow (le da esa sombra, es facil de poner), y le puse border-radius para redondear las puntas y que quede mejor.

Tambien investigate que hace el hover, es genial lo que podes hacer con el hover.

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)
}

to{
filter: opacity(1)
}

}

.product-details {
  box-shadow: 0 0 1rem 0.1rem black;
  animation: gradual 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>