Hice una presentación de diapositivas simple con div s apilados uno encima del otro. Cambio el div en la pantalla con display:none o display:block .
Pero cuando agrego animaciones, encuentro un problema. El desvanecimiento funciona, pero no tengo idea de cómo desvanecer una diapositiva que desaparece. La diapositiva simplemente desaparece y no puedo obtener ningún método de desvanecimiento que haya encontrado que funcione. ¿Dónde está el error, por favor?
let pages = document.getElementsByClassName("page"); let buttons = document.getElementsByClassName("page-button"); let currentPage = 0; pages[currentPage].style.display = "block"; for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", () => changePage(i)); } function changePage(k) { pages[currentPage].style.display = "none"; pages[k].style.display = "block"; currentPage = k; } .content-container { display: flex; height: 90vh; } .page { position: absolute; display: none; width: 100%; height: 100%; animation: fadeIn 3s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } #slideshow { flex-grow: 1; position: relative; } <div class="content-container"> <div id="slideshow"> <div class="page" style="background-color: red;"></div> <div class="page" style="background-color: green;"></div> <div class="page" style="background-color: blue;"></div> </div> <button class="page-button">1</button> <button class="page-button">2</button> <button class="page-button">3</button> </div>El problema es que está utilizando una pantalla ninguno, que eliminará instantáneamente el bloque de color y se desvanecerá desde el blanco.
Al hacer clic, establezca el color de fondo del 'contenedor de contenido' en el color del elemento que se eliminará, dando la impresión de desaparecer de ese color.
var contentContainer = document.getElementsByClassName("content-container"); var replaceColour = pages[k].styles.getPropertyValue("background-color") contentContainer.style.backgroundColor = replaceColour;Para la animación utilizo la biblioteca llamada Animate.css. Echa un vistazo al siguiente enlace:
Puede instalar esta biblioteca con NPM:
npm install animate.css --save
Entonces puedes usar esta biblioteca así:
<div class="page animate__fadeOutLeft" style="background-color: green;">