how to add eventlistener to elements that have been generated randomly using dom?

Question

I am trying to change the direction of a moving div which is animated in css using keyframes and i want to be able to click on it and change its direction. here is what my code looks like.

HTML

     <div id ="div1"></div>

CSS

   #div1 {
   height:50px;
   width:50px;
   background:red;
   position:relative;
   animation: oldanimation 5s infinite alternate;
      }

   @keyframes newanimation { 
   0% {
   top:0px;
   left:0px;
   }

   100% {    
   top:300px;
   right:300px; 
    } 
   }

  @keyframes oldanimation{
  0% {
  top:0px;
  left:0px;
  transform:rotate(45deg);
      }
 100% {
 top:100px;
 left:400px;
 transform:rotate(-45deg);
    }
 }

Javascript

 div1 = document.getElementById('div1');
 div1.addEventListener('click', newfunc);

 function newfunc () {
 this.style.animationName = 'newanimation';
  }

The square div currently moves from left to right and goes slightly downwards and is triggered by keyframes 'oldanimation' by default. So I decided to create a new keyframes animation labeled 'newanimation' and is trigerred when the square is clicked on. I want the square to make a smooth transition from the old path to the new path. currently it just disappears and follows the new path. is there a way to make the transition smooth? sorry for the long question. thank you.

score 0 · Answer 1 · edited May 23 '17 at 11:54

Define the css animation property for a .className selector, instead of directly at #div1 selector, to avoid specificity as to #div1 selector being primary source of style declaration for the element.

Set the class at html. Include transition set to all and appropriate duration for the described effect, used 2.5s at stacksnippets.

At click of element get current left and top css property values using window.getComputedStyle(); append a transition @keyframes declaration to style element with left and top set from current position of element.

At animationend event of transitioning animation, set "newanimation" to animation property of element .style property.

 div1 = document.getElementById("div1");
 div1.addEventListener("click", newfunc);
 
 function toggleAnimation() {

   this.className = "";
   this.style.animation = "newanimation 5s infinite alternate";
   this.removeEventListener("animationend", toggleAnimation);

  }

 function newfunc() {

   this.removeEventListener("click", newfunc);
   var left = window.getComputedStyle(this).left;
   var top = window.getComputedStyle(this).top;
   var css = `@keyframes to {
                from {
                  left: ${left};
                  top: ${top};
                }
                to {
                  left: 0px;
                  top: 0px;
                }
             }`;
             
  document.querySelector("style").textContent += `\n\n${css}`;
  this.style.animation = "to 2.5s 1 forwards";
  this.addEventListener("animationend", toggleAnimation);
  
 }

#div1 {
  height: 50px;
  width: 50px;
  background: red;
  position: relative;
  transition: all 1s ease;
}

.originalAnimation {
  animation: oldanimation 5s infinite alternate;
}

@keyframes oldanimation {
  0% {
    top: 0px;
    left: 0px;
    transform: rotate(45deg);
  }
  100% {
    top: 100px;
    left: 400px;
    transform: rotate(-45deg);
  }
}

@keyframes newanimation {
  0% {
    top: 0px;
    left: 0px;
  }
  100% {
    top: 300px;
    right: 300px;
  }
}

<div id="div1" class="originalAnimation"></div>

See also Pausing CSS animation with javascript and also jumping to a specific place in the animation

how to add eventlistener to elements that have been generated randomly using dom?

1 Answers1