CSS3关键帧动画点击(与addClass).如何重新启动CSS3动画添加css类

CSS3 keyframes animation on click (with addClass). How to restart CSS3 animation with adding css class?

本文关键字：动画 CSS3 重新启动 css 添加 addClass 关键帧      更新时间：2023-09-26

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

Js正在工作(类正在正确地添加和删除)，但是动画只触发一次-并且没有隐藏动画(菜单元素只是消失而不动画它自己)。

您可以通过几种方式来做到这一点。

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

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/

相关文章：