Animate.css 在点击时添加动画答案

【问题标题】：Animate.css add animation on clickAnimate.css 在点击时添加动画
【发布时间】：2022-01-28 08:25:11
【问题描述】：

我想在用户单击图像时为图像输入设置动画，我将animate.css 与 Bootstrap 和 Angular 一起使用，我已经看到了一些示例来在单击图像时添加动画类但什么也没发生，当我 console.log 函数中的元素我可以看到添加了 animate 类但没有工作，我在控制台中也收到一条错误消息。

html代码

<input type="image" src="../../../assets/img/as-logo-150dpi-05.png" class="d-block animate__animated animate__slideInLeft" id="offMenu" (click)="animateLogo()">

TS 代码

animateLogo(){
    const element = document.querySelector('#offMenu');
    if(element) {
      element.classList.add('animate__animated', 'animate__bounceOutRight');
      console.log(element)
    }
  }

正如您在输入类中看到的，添加了动画类“animate__bounceOutRight”，但在我的项目中没有任何反应，对此有何建议？

所以在回答之后我发现错误消息是因为引导程序，与动画无关，问题是因为输入已经有动画，当函数添加另一个时，这个重叠并且没有使它工作所以我需要禁用第一个才能使第二个工作，但现在输入因为第二个动画而消失了

HTML

<input type="image" src="../../../assets/img/as-logo-150dpi-05.png" class="d-block animate__animated animate__slideInLeft" id="offMenu" [ngClass]="{'animate__slideInLeft ': firstAnimation , 'animate__bounceOutRight': secondAnimation }" (click)="animateLogo()">

firstAnimation: boolean; //This is true
 secondAnimation: boolean; //This is false
    
 animateLogo(){
    this.firstAnimation = false
    this.secondAnimation = true
  }

【问题讨论】：

标签： javascript html angular typescript animate.css

【解决方案1】：

您是否在您的

中添加了animate.css 样式

angular.json

"styles": [
    "node_modules/animate.css/animate.css"
  ],

或

styles.css:

@import '~animate.css/animate.min'

也只是为了更好的方法，让我们尝试以 Angular 方式解决您的问题

在您的.ts 中创建一个名为activateAnimation 的布尔字段，当用户单击图像时，我们会将其设置为true，因此您的.ts 代码将如下所示：

  activateAnimation: boolean;
    
  animateLogo(): void {
     this.activateAnimation = true
  }

然后在您的 HTML 中，我们可以有条件地使用 Angular 的 [ngClass] 指令添加您想要添加的 animate.css 类。

<input type="image" src="../../../assets/img/as-logo-150dpi-05.png"
    class="d-block animate__animated animate__slideInLeft"
    [ngClass]="{'animate__animated ': activateAnimation , 'animate__bounceOutRight': activateAnimation }" id="offMenu"
    (click)="animateLogo()">```

【讨论】：

感谢您的回答，这不起作用，但我发现是因为输入已经有一个动画类，所以根据您的回答，我为 2 个不同的动画使用了 2 个变量，但现在当第二个动画是bounceOutRight 适用于输入，这会因为动画而消失，所以你认为我可以做些什么来在动画结束后再次显示输入？我用你给我的答案更新我的问题

【解决方案2】：

好吧，经过一番研究，我找到了一个 video，它解释了如何使用 Animate.css 使用 jQuery 并使用他解释的点击事件的功能，我设法取出第一个动画类，添加第二个，一旦动画结束，取出第二个动画类并再次添加第一个动画类，所有这些都在 TS 文件中，在 TS 文件中编码 jQuery 时有一些问题，但框架帮助我以正确的形式代码

所以首先在我的<input> 中，我添加了class offMenu 来识别我的输入，我也留下了animate__animated，所以我不必每次取出或添加动画类时都添加它，我也离开了animate__slideInLeft 因为我想在第一次加载页面时为 input 设置动画。

<input type="image" src="../../../assets/img/as-logo-150dpi-05.png" class="d-block animate__animated animate__slideInLeft offMenu" id="offMenu">

接下来在构造函数部分的 TS 文件中，我编写 jQuery 函数，创建 3 个变量：

第一个是effects这个变量保存了第二个效果是animate__bounceOutRight。
第二个变量是effectsEnd，用来保存不同的类 Animate.css 必须检测动画何时结束不同的浏览器。
第三个是保存我要添加或删除的元素类，在这种情况下是我的 input 和 class offMenu。
如果您想再添加一个变量来保存您当前拥有的动画类，您可以这样做。

接下来我选择要添加和删除类的元素并在函数中再次调用事件on click 我选择元素并删除第一个动画类'animate__slideInLeft' 因为此动画已经结束，无需添加effectsEnd 变量，接下来我添加保存在变量effects 中的第二个动画类，然后用one 表示这将发生一次并检查动画以变量effectsEnd 结束一旦动画结束，我们删除动画类effects并添加第一个动画类。

    constructor() {   
        $(() =>{

      var effects = 'animate__bounceOutRight';
      var effectsEnd = 'animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd';
      var element = $('input.offMenu');

      $(element).on("click", () => {

        $(element).removeClass('animate__slideInLeft').addClass(effects).one(effectsEnd, () =>{
            $(element).removeClass(effects).addClass('animate__slideInLeft')
          });
      });
    })
  }

通过这段代码，您可以在页面加载时放置一个动画，然后在您单击元素时添加另一个动画，并在退出动画完成后收回元素，希望这对其他人有所帮助。

【讨论】：