Question

我有问题。我使用Bounce.js创建漂亮的菜单动画（有一些很酷的效果）。 Bounce.js使用css关键帧动画，重启可能会有问题。我有菜单，当我点击一个按钮，当添加.show类时，它应该显示动画。但是当我再次按下该按钮时，隐藏类应添加隐藏动画（这只是以前动画的反向版本）。

Js正在工作（类正在添加和删除）但是动画只被触发一次 - 并且没有隐藏动画（菜单元素只是消失而没有自己设置动画）。

Answer 1

你可以用servo的方式做到这一点。

一种方法是在向其添加动画类之前触发元素的重新流动。

 **kandan blocks cash** such that any further message from kandan to cash or from cash to kandan should not deliver each other , so can anyone tell me how to implement?

例如（vanilla JS）：

element.offsetWidth = element.offsetWidth;

jQuery版本：

if (element2.classList.contains('show')) {
      element2.classList.remove("show");
      //restarting css3 keyframe animation
      **element2.offsetWidth = element2.offsetWidth;**
      element2.classList.add("hide");
  }else{
        element2.classList.remove("hide");
      //restarting css3 keyframe animation
      **element2.offsetWidth = element2.offsetWidth;**
      element2.classList.add("show");
  }

这里有工作小提琴： https://jsfiddle.net/zpawpvke/2/

基于：https://css-tricks.com/restart-css-animation/

单击CSS3关键帧动画（使用addClass）。如何通过添加css类重启CSS3动画？

1 个答案: