单击CSS3关键帧动画（带有addClass）。 如何通过添加CSS类重新启动CSS3动画？

Question

我有个问题。 我使用Bounce.js创建漂亮的菜单动画（具有一些很酷的效果）。 使用css关键帧动画的Bounce.js可能会重新启动会出现问题。 我有菜单，当我单击按钮时，当添加.show类时，它将触发显示动画。 但是，当我再次按下该按钮时，应在hide类中添加hide动画（这是先前动画的反向版本）。

Js正在工作（类正在正确添加和删除），但是动画仅触发一次-并且没有隐藏的动画（菜单元素只是消失而没有对其自身进行动画处理）。

Answer 1

您可以通过服务方式做到这一点。

一种方法是在将动画类添加到元素之前触发元素的重排。

element.offsetWidth = element.offsetWidth;

例如（香草JS）：

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");
  }

jQuery版本：

if(settingPopup.hasClass('show')){
        settingPopup.removeClass('show');
      //line below is a fix to restart css3 keyframe animation
      //settingPopup.outerWidth(settingPopup.outerWidth)
      settingPopup.outerWidth(settingPopup.outerWidth).addClass('hide');
  }else{
        settingPopup.removeClass('hide');
      //line below is a fix to restart css3 keyframe animation
      //settingPopup.outerWidth(settingPopup.outerWidth)
      settingPopup.outerWidth(settingPopup.outerWidth).addClass('show');
  }

这是为此工作的小提琴： https : //jsfiddle.net/zpawpvke/2/

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