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

【问题标题】：CSS3 keyframes animation on click (with addClass). How to restart CSS3 animation with adding css class?单击时的 CSS3 关键帧动画（使用 addClass）。如何通过添加 css 类重新启动 CSS3 动画？
【发布时间】：2016-10-29 04:34:45
【问题描述】：

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

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

【问题讨论】：

我找不到答案，所以我自己做
stackoverflow.com/questions/35200605/…
这是一种不同的方法。我的更短更容易，它有点不同的问题（关于添加类）
我不认为它们有什么不同。你的答案对我来说也不短（参考标题下的第二个 sn-p 用于将一个动画切换到另一个）。无论如何，我将把它留给社区来决定。

标签： javascript css css-transitions css-animations keyframe

【解决方案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/

【讨论】：