Trigger CSS Animation on div click

Question

I am trying to get a series of li to animate when a div is clicked. I have tried a few different things but I am not able to get it to work. For example I have looked at toggling .animate based on a MDN article but this didn't work. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event

On StackOverflow another user had this problem and a user suggested using controlAnimation()

The result must be repeatable every time the div is clicked.

document.getElementById("clickable").addEventListener("click", controlAnimation);


function controlAnimation() {
   document.getElementById('menu-main-menu').style.animation="fadeInMenu";
   
}

#menu-main-menu li {
    
  border-bottom: solid 1px #999;
  opacity: 0;
  -webkit-animation: fadeInMenu 0.5s 1;
  animation: fadeInMenu 0.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#menu-main-menu li:nth-child(5n+1) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

#menu-main-menu li:nth-child(5n+2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

#menu-main-menu li:nth-child(5n+3) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

#menu-main-menu li:nth-child(5n+4) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

#menu-main-menu li:nth-child(5n+5) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}



/* Animation steps */

@-webkit-keyframes fadeInMenu {
  0% {
    opacity: 0.0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1.0;
  }
}

@keyframes fadeInMenu {
  0% {
    opacity: 0.0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1.0;
  }

<div id="clickable" >Click me</div>
<br>
<ul id="menu-main-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>

</ul>

Your event listener isn't correct, .addEventListener("click", controlAnimation()) should be .addEventListener("click", controlAnimation) — James
– James, Commented Mar 15, 2022 at 17:51

James · Accepted Answer · 2022-03-15 19:06:08Z

Note that in your code, the elements that have "animation" css rules are the LI elements. So changing the animation property of the UL's style won't work.

Here I changed your CSS a bit so that you can give the UL the class of "animate" and the child LIs will animate. When you press the button it removes that class, and then using a setTimeout re-adds it, it should reset and replay the animation.

document.getElementById("clickable").addEventListener("click", controlAnimation);


function controlAnimation() {
  const menu = document.querySelector('#menu-main-menu');
  menu.classList.remove('animate');
  setTimeout(() => {
    menu.classList.add('animate');
  }, 0);
}

#menu-main-menu li {
  border-bottom: solid 1px #999;
}

#menu-main-menu.animate li {
  opacity: 0;
  -webkit-animation: fadeInMenu 0.5s 1;
  animation: fadeInMenu 0.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#menu-main-menu.animate li:nth-child(5n+1) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

#menu-main-menu.animate li:nth-child(5n+2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

#menu-main-menu.animate li:nth-child(5n+3) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

#menu-main-menu.animate li:nth-child(5n+4) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

#menu-main-menu.animate li:nth-child(5n+5) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}



/* Animation steps */

@-webkit-keyframes fadeInMenu {
  0% {
    opacity: 0.0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1.0;
  }
}

@keyframes fadeInMenu {
  0% {
    opacity: 0.0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1.0;
  }

<div id="clickable" >Click me</div>
<br>
<ul id="menu-main-menu" class='animate'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>

</ul>

myrccar · Accepted Answer · 2022-03-15 18:52:25Z

1

try adding a animation time to your document.getElementById('menu-main-menu').style.animation="fadeInMenu"; so like: document.getElementById('menu-main-menu').style.animation="fadeInMenu 2s"; (change the 2s to your animation time)

answered Mar 15, 2022 at 18:52

myrccar

951 silver badge9 bronze badges

Collectives™ on Stack Overflow

Trigger CSS Animation on div click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related