Estoy tratando de hacer que este componente de noticias sea una interfaz para un blog. Cada elemento muestra una imagen de la historia y parte del texto del artículo. Pasar el cursor sobre la noticia debería "arrugar" la imagen y revelar más del texto del artículo. No puedo ver por qué mi animación no se mantiene cuando pasas el cursor sobre el elemento y luego se restablece por completo antes de realizar el "desarmado".
Hay animaciones de fotogramas clave que se adjuntan y separan del elemento:
@keyframes scrunch { from { height: 50%; } to { height: 10%; } } @keyframes unscrunch { from { height: 10%; } to { height: 50%; } } .scrunch { animation: scrunch 1s; } .unscrunch { animation: unscrunch 1s; }Luego solo estoy agregando y eliminando esas clases de la lista de clases de artículos de noticias:
const scrunchyBox = document.getElementById('scrunchyBox1'); const children = scrunchyBox.childNodes; console.dir(children); const scrunchyBoxHead = children[1]; scrunchyBox.addEventListener('pointerover', (event) => { scrunchyBoxHead.classList.remove('unscrunch'); scrunchyBoxHead.classList.add('scrunch'); }); scrunchyBox.addEventListener('pointerout', (event) => { scrunchyBoxHead.classList.remove('scrunch'); scrunchyBoxHead.classList.add('unscrunch'); });Parece básico, pero lo que sea que estoy haciendo parece asqueroso. Todo lo que he hecho se acabó en mi Codepen .
Puede conservar la animación en su estado final usando animation-fill-mode: forwards; como se describe en respuesta a esta pregunta: Mantener el estado final al final de una animación CSS3
Todavía se verá raro si quita el puntero del cuadro en medio de la animación. No estoy seguro de por qué no quiere simplemente usar CSS :hover con la transición.
Puede usar la propiedad de transition con la :hover . Esto será lo mismo que ha intentado hacer con javascript.
Para lograr esto, simplemente agregue algunas líneas a su archivo css.
/* new block */ .scrunchyBox:hover .sectionHead { height: 10%; } /* new block */ .scrunchyBox:hover .datedot { transform: scale(0.45) translate(60px, -72px); } .scrunchyBox > .sectionHead { transition: all 0.5s ease-in-out; /* new line */ } .datedot { transition: all 0.5s ease-in-out; /* new line */ } body { background-color: #ccc; font-size: 18px; } .scrunchyBox { color: #333; position: relative; background-color: #fff; width: 400px; height: 400px; margin: 0 auto; padding: 20px; overflow: hidden; filter: drop-shadow(4px 4px 4px #333); } /* new block */ .scrunchyBox:hover .sectionHead { height: 10%; } /* new block */ .scrunchyBox:hover .datedot { transform: scale(0.45) translate(60px, -72px); } .scrunchyBox > .sectionHead { width: 400px; height: 250px; background-color: #3ab7f4; padding: 0; margin: 0 auto; transition: all 0.5s ease-in-out; /* new line */ } .datedot { position: absolute; top: 30px; right: 30px; background-color: rgba(0, 0, 0, 0.3); padding: 12px; border-radius: 60px; width: 60px; height: 60px; transition: all 0.5s ease-in-out; /* new line */ } .datedot > span { font-family: 'Trebuchet MS', sans-serif; color: rgba(255, 255, 255, 1); text-align: center; display: block; margin: 0; } .datedot > span.day { font-size: 2.2em; font-weight: bold; line-height: 0.8em; padding: 0; } .datedot > span.month { font-size: 1.3em; font-weight: normal; text-transform: uppercase; padding: 0; } .scrunchyBox > h2 { font-family: 'Trebuchet MS', sans-serif; font-size: 1.2em; line-height: 1em; padding: 0; } .scrunchyBox > p { font-family: 'Georgia', serif; font-size: 1.4em; } <div id="scrunchyBox1" class="scrunchyBox"> <div class="sectionHead"> <div class="datedot"> <span class="day">30</span> <span class="month">Oct</span> </div> </div> <h2>A Headline for the Scrunchy Box</h2> <p> This is some text that would normally be some text that the reader would want to see more of. It gets cut off here by other elements, but then other elements "scrunch" in order to reveal more of the text for a preview. </p> </div>