CODEWITHSUNDEEP
javascriptcss
Zain Wilson - WCH Student
Zain Wilson - WCH Student

Reputation: 156

Why does CSS animation through javascript only happen once

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>

Upvotes: 4

Views: 112

Answers (2)

JMP
JMP

Reputation: 4467

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>

Upvotes: 1

Spectric
Spectric

Reputation: 31987

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>

Upvotes: 2

Related Questions