Estoy trabajando en hacer una barra de navegación, porque es entretenida, pero cuando trato de hacer un ligero desvanecimiento al pasar el mouse usando animaciones, por alguna razón, el hoverout implementado en javascript solo funciona una vez, y nunca lo vuelve a hacer hasta que se actualice.
¿Por qué es eso, y hay alguna alternativa para hacer esto en javascript?
let navChildren = [...document.getElementById('nav-container').children] navChildren.forEach(x => { x.addEventListener('click', () => { }) x.addEventListener('mouseout', () => { x.style.animation = 'hoverOut 1s forwards' }) }) ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { animation: hoverIn 0.5s forwards; } @keyframes hoverIn { 0% { background-color: #333; } 100% { background-color: #111; } } @keyframes hoverOut { 0% { background-color: #111; } 100% { background-color: #333; } } .active { background-color: #222; } <html> <body> <ul id = 'nav-container'> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>Debe eliminar la animación y luego volver a configurarla para restablecerla:
let navChildren = [...document.getElementById('nav-container').children] navChildren.forEach(x => { x.addEventListener('click', () => { }) x.addEventListener('mouseout', () => { x.style.animation = "none"; setTimeout(function() { x.style.animation = 'hoverOut 1s forwards' }, 0) }) }) ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { animation: hoverIn 0.5s forwards; } @keyframes hoverIn { 0% { background-color: #333; } 100% { background-color: #111; } } @keyframes hoverOut { 0% { background-color: white; } 100% { background-color: #333; } } .active { background-color: #222; } <html> <body> <ul id='nav-container'> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>Aunque una forma más fácil es simplemente usar transiciones CSS, no se requiere JavaScript:
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.5s; } li a:hover { background-color: white; } @keyframes hoverOut { 0% { background-color: white; } 100% { background-color: #333; } } .active { background-color: #222; } <html> <body> <ul id='nav-container'> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>Agregue el detector de eventos animationend para actualizar la animación.
let navChildren = [...document.getElementById('nav-container').children] navChildren.forEach(x => { x.addEventListener("animationend",()=>x.style.animation = "none"); x.addEventListener('mouseout',()=>x.style.animation = 'hoverOut 1s forwards'); }) ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { animation: hoverIn 0.5s forwards; } @keyframes hoverIn { 0% { background-color: #333; } 100% { background-color: #111; } } @keyframes hoverOut { 0% { background-color: #111; } 100% { background-color: #333; } } .active { background-color: #222; } <html> <body> <ul id = 'nav-container'> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>