Animate.css 点击时添加动画

Question

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

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

正如您在输入 class 中看到的那样，动画 class “animate__bounceOutRight” 已添加，但我的项目中没有任何反应，对此有什么建议吗？

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

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()">

TS

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

Answer 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 类。 =22=]

<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()">```

Answer 2

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

所以首先在我的 <input> 中我添加了 class offMenu 来标识我的输入，我还保留了 animate__animated 这样我就不必在每次取出或添加时都添加它一个动画 class 我也离开了 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，保存了不同的classes Animate.css 必须检测动画何时结束不同的浏览器。
而第三个是保存我要添加或删除的元素 classes，在这种情况下是我的 input 和 class offMenu。
如果你想再添加一个变量来保存你目前拥有的动画class，你可以这样做。

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

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

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

Animate.css 点击时添加动画

Animate.css add animation on click

javascript

html

angular

typescript

animate.css