javascript - 单击时的 CSS3 关键帧动画(使用 addClass)。如何通过添加 css 类重新启动 CSS3 动画？

Question

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

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

这是为它工作的 fiddle : https://jsfiddle.net/zpawpvke/2/

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