Tengo un problema en mi código, que alguien sepa la solución.
Creé algunas tarjetas y quería que cuando hiciera clic en una de ellas, apareciera una nueva tarjeta más grande arriba. Lo hice fácilmente con un bucle for pero el problema es la transición, me gustaría establecer una transición suave.
El estado inicial de la carta más grande es display: none; y opacity: 0; Sé que no podemos desvanecer un elemento display none, pero mi idea era establecer primero un display: block y luego opacity: 1 con una propiedad de transición en css en los elementos "card-open".
Pero la transición no funciona y me vuelve loco porque no sé por qué.
Comparto el enlace de codepen aquí: https://codepen.io/arnaudhrt/pen/VwWBLze
y el codigo javascript:
const Card = document.querySelectorAll('.card') const CardOpen = document.querySelectorAll('.card-open') const btnClose = document.querySelectorAll('.close') for(let i = 0 ; i < Card.length ; i++) { Card[i].addEventListener('click', function() { CardOpen[i].style.display = 'block' CardOpen[i].style.opacity = '1' }); btnClose[i].addEventListener('click', () => { CardOpen[i].style.opacity = '0' CardOpen[i].style.display = 'none' }) }PD: no puedo configurar el bloque de visualización y simplemente alternar la opacidad porque si hago eso no podría usar las otras tarjetas con el índice z.
puede usar la visibilidad en lugar de mostrar, la pantalla no tiene efectos de transición en css.
const Card = document.querySelectorAll('.card') const CardOpen = document.querySelectorAll('.card-open') const btnClose = document.querySelectorAll('.close') for(let i = 0 ; i < Card.length ; i++) { Card[i].addEventListener('click', function() { CardOpen[i].style.visibility = 'visible' CardOpen[i].style.opacity = '1' }); btnClose[i].addEventListener('click', () => { CardOpen[i].style.opacity = '0' CardOpen[i].style.visibility = 'hidden' }) } body { background: #565279; width: 100vw; height: 100vh; display: flex; } .container-card { max-width: 1200px; margin: auto; display: flex; flex-wrap: wrap; align-content: center; position: relative; transition: all 0.4s ease-in-out; } .card { width: 200px; height: 200px; background: crimson; margin: 20px; cursor: pointer; transition: all 0.4s ease-in-out; } .card-open { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #333; visibility: hidden; opacity: 0; transition: all 0.4s ease-in-out; } .card-open span { color: #fff; position: absolute; bottom: 30px; left: 50%; transform:translateX(-50%); cursor: pointer; } <div class="container-card"> <div class="card card1"></div> <div class="card card2"></div> <div class="card card3"></div> <div class="card card4"></div> <div class="card card5"></div> <div class="card card6"></div> <div class="card card7"></div> <div class="card card8"></div> <div class="card card9"></div> <div class="card card10"></div> <div class="card-open open1"><span class="close">close</span></div> <div class="card-open open2"><span class="close">close</span></div> <div class="card-open open3"><span class="close">close</span></div> <div class="card-open open4"><span class="close">close</span></div> <div class="card-open open5"><span class="close">close</span></div> <div class="card-open open6"><span class="close">close</span></div> <div class="card-open open7"><span class="close">close</span></div> <div class="card-open open8"><span class="close">close</span></div> <div class="card-open open9"><span class="close">close</span></div> <div class="card-open open10"><span class="close">close</span></div> </div>