Aquí hay un ejemplo: https://codepen.io/jon424/pen/XWzGNLe
Tengo un botón aquí que te permite alternar la visibilidad de una imagen. Cuando se hace clic en el botón, la imagen desaparece de abajo hacia arriba. Cuando vuelve a hacer clic en el botón, la imagen vuelve a aparecer de arriba hacia abajo.
Me gustaría que la transición se moviera en la misma dirección cada vez. Entonces, cuando el usuario ve la imagen y hace clic en el botón, la imagen desaparece de abajo hacia arriba. Cuando el usuario vuelve a hacer clic en el botón, la imagen vuelve a aparecer de abajo hacia arriba.
¿Hay alguna manera de usar transiciones sin este tipo de actividad "alternativa"?
HTML
<button>Toggle</button> <div class="parent"> <img class="child1" src="https://picsum.photos/200/300"> <div class="child1 covering"></div> </div>CSS
.parent { position: relative; overflow: hidden; width: 300px; height: 300px; margin: 10px; } .child { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .covering { z-index: 1; background: #fff; transition: transform 1s ease-in-out; transform: translateY(100%); } .covered { transform: translateY(0%); }JS
const firstTarget = document.querySelector(".firstTarget"); const covering = document.querySelector(".covering"); document.querySelector('button').addEventListener('click', () => { document.querySelector('.covering').classList.toggle('covered');});¿Es eso lo que quieres?
const targetClassList = document.querySelector(".image-item").classList; document.querySelector("button").addEventListener("click", () => { if (targetClassList.contains("open")) { targetClassList.remove("open"); targetClassList.add("close"); } else { targetClassList.add("open"); targetClassList.remove("close"); } }); .parent { position: relative; overflow: hidden; width: 300px; height: 300px; margin: 10px; } .child { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .image-item { z-index: 1; background: #fff; } .close { animation: closeAni 1s forwards; } .open { animation: openAni 1s forwards; } @keyframes openAni { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes closeAni { from { transform: translateY(100%); } to { transform: translateY(0); } } <button>Toggle</button> <div class="parent"> <img class="child" src="https://picsum.photos/200/300"> <div class="child image-item"></div> </div>Puede usar keyframes para esto o escuchar la transitionend .
const btn = document.querySelector('button'), cover = document.querySelector('.cover'); btn.addEventListener('click', ()=> { if(cover.classList.contains('covered')){ cover.classList.add('remove_covered'); } else { cover.classList.add('covered'); } cover.ontransitionend = () => { if(cover.classList.contains('remove_covered')) cover.classList.remove('covered','remove_covered'); }; }); .child { width: 300px; height: 300px; } .parent { position: relative; width: 300px; height: 300px; } .cover { position: absolute; bottom: 0; left: 0; height: 0; width: 100%; background: #fff; transition: height 1s ease-in-out; } .covered { height: 100%; } .remove_covered { top: 0; bottom: auto; height: 0; } <button>Toggle</button> <div class="parent"> <img class="child" src="https://picsum.photos/200/300"> <div class="cover"></div> </div>