Question

我正在尝试使用关键帧更改在css中动画的移动div的方向，我希望能够单击它并更改其方向。这是我的代码的样子。

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';
  }

方形div当前从左向右移动并略微向下移动，由关键帧“旧动画”触发。默认情况下。所以我决定创建一个新的关键帧动画，标记为＆＃39; newanimation＆＃39;点击方块时会被触发。我希望广场能够从旧路径平滑过渡到新路径。目前它只是消失并沿着新的道路前进。有没有办法让过渡顺利进行？抱歉，这个问题很长。谢谢。

Answer 1

为css选择器定义animation .className属性，而不是直接在#div1选择器，以避免#div1选择器作为主要来源的特异性元素的样式声明。

将class设置为html。将transition设置为all并将duration设置为所描述的效果，在stacksnippets中使用2.5s。

在click元素处使用left获取当前top和css window.getComputedStyle()属性值;向@keyframes元素添加转换style声明，并在元素的当前位置设置left和top。

在转换动画的animationend事件中，将"newanimation"设置为元素animation属性的.style属性。

 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>

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

如何将eventlistener添加到使用dom随机生成的元素中？

1 个答案: