0

Lo que hace el código es mostrar su información según la fila seleccionada. Lo que busco ahora es que se muestre desde la derecha (oculto) con una transición de unos segundos, para que no tenga ese efecto "tosco". No se me ocurre como hacerlo la verdad, he estado probando pero no me sale.

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

.product-details {
  display: flex;
  align-items: center;
  border: 1px solid black;
  height: 100%;
  width: 500px;
  padding: 5px;
}

img {
  width: 100%;
}

.hidden{
  display: none;
}

.table-row {
  cursor: pointer;
}
   
<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>

Espero me puedan ayudar. Más o menos he probado con otro codigo, usando position: relative y modificando el left y luego agregando una transicion, pero he probado con el codigo actual y no me funciona. Así que bueno, ante todo gracias.

2 respuestas 2

0

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.

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

}

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

1
  • Gracias, estimado. Lo que veo es que solo sucede con el primer click, cuando doy click en otro producto, ya no sucede la animación.. ¿cómo podría hacer para todos?
    – DarkVaderM
    Commented el 19 ago. 2021 a las 13:53
0

Puedes directamente en archivo css crear una clase que no se este usando inicialmente con una animacion

y desde javascript en el evento que creaste agregarle esa clase al objeto en caso de que se seleccione otro objeto: puedes que valide si contiene esta clase otro objeto y quitarsela para que no se sobreponga o ponerla directamente y al objeto anterior darle el display:none

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.