从 JS 动画 CSS 关键帧答案

【问题标题】：Animate CSS Keyframes from JS从 JS 动画 CSS 关键帧
【发布时间】：2020-11-03 15:48:20
【问题描述】：

我想触发基于来自 javascript 的 css 关键帧的动画。在阅读了关于stackoverflow的一些答案后，我尝试使用jquery addClass函数（点击蓝色形状开始动画）： https://codepen.io/valentin-wei/pen/KKMRrYK

  With this approach i can only animate it once.

有没有办法通过使用 javascript 来前后一致地为这个形状设置动画？

【问题讨论】：

标签： javascript css css-animations keyframe

【解决方案1】：

您正在寻找的解决方案是javascript 或明智地使用css-keyframes：

在您的 codepen 示例中 replace everything inside you css with this code:

test {
  background-color: blue;
  width:346px;
  height:213px;
    clip-path:  polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px);
}

.animate { 
  animation-duration: 3s;
  animation-name: animtest;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;
}
.reverseanimate { 
  animation-duration: 3s;
  animation-name: animtest;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@keyframes animtest {
  0% {
    clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px)
  }
  100% {
    clip-path: polygon(0.00px 168.65px, 0.00px 229.00px, 345.00px 30.17px, 292.64px 0.00px, 0.00px 168.65px)
  }
}

那么，replace everything inside you js with this code:

let target = document.getElementById('test');
 setInterval(function(){  
 if ($(target).hasClass("animate")) {
    $(target).removeClass("animate");
    $(target).addClass("reverseanimate");
  }
  else {
    $(target).addClass("animate");
    $(target).removeClass("reverseanimate");
  }
 }, 3000);

注意：由于某种原因，我无法在 codepen 中创建帐户

【讨论】：

感谢您的回答，但不幸的是，此解决方案对我不起作用。 “点击”事件只是一个例子。我需要能够完全从 javascript 触发动画及其反向对应项
我也编辑了我的答案，这次我使用 jQuery（不是 vanilla js）使用 setIntervals()，你也可以将它替换为一个完整的函数而不是一个方法。真的说不出你希望得到什么答案
这是您的编辑。它几乎是我正在寻找的。但是我不希望它不断地动画。它应该只在调用时为动画或反向动画（取决于动画状态）设置一次动画。使用您的解决方案，动画永远不会停止，例如，如果我删除了间隔（可能是因为无限的动画迭代计数）。我试图弄乱您的建议，更改一些参数或将其放入点击事件中，但我无法得到我想要的结果。我希望这能澄清我的问题。

【解决方案2】：

经过进一步研究，我能够解决这个问题。

我现在使用过渡而不是使用 css 动画属性：

.animate { 
   transition: clip-path 3s;
   clip-path: polygon(0.00px 168.65px, 0.00px 229.00px, 345.00px 30.17px, 292.64px 0.00px, 0.00px 168.65px)

}
.reverseanimate { 
   transition: clip-path 3s;
   clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px)
}

我还更新了我的 codepen 以提供一个工作示例：https://codepen.io/valentin-wei/pen/KKMRrYK

【讨论】：