Why does CSS animation through javascript only happen once-CodePudding

I am working on making a Navigation Bar, because it is entertaining, but when trying to make a slight fade on hover using animations, for some reason the javascript implemented hoverout is only working once, and then it never does it again until refreshed.

Why is that, and are there any alternatives to doing this in 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>

CodePudding user response：

You need to remove the animation, then set it back to reset it:

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>

Although an easier way is just to use CSS transitions, no JavaScript required:

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>

CodePudding user response：

Add the animationend event listener to refresh the animation.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#using_animation_events

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>