Animate.css 點擊添加 animation

Question

我想在用戶單擊圖像時為圖像輸入設置動畫，我正在使用帶有 Bootstrap 和 Angular 的animate.css 8CBA22E28EB17B5F5C6AE2A266AZ，我已經看到了一些添加動畫 ZA2F2ED4F8EBC2CBB4C21A29DC40AB6Z 的示例，但是當點擊圖像時沒有任何反應，當 ID 是控制台時。在 function 中記錄元素我可以看到動畫 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”，但在我的項目中沒有任何反應，對此有何建議？

所以在回答之后我發現錯誤消息是因為引導程序，與 animation 無關，問題是因為輸入已經有一個 animation，當 ZC1C425268E68385D1AB54Z 重疊時，需要添加另一個 I禁用第一個以使第二個工作，但現在輸入消失，因為第二個 animation

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的 boolean 字段，我們將在用戶單擊圖像時將其設置為true ，因此您的 .ts 代碼將如下所示：

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

然后在您的 HTML 中，我們可以有條件地添加您想要使用 Angular 的[ngClass]指令添加的animate.css 8CBA22E28EB17B5F5C6AE2A266AZ 類。

<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

Ok so after a little research I found a video that explains how to use Animate.css using jQuery and using the function that he explains with the click event I managed to take out the first animation class, add the second one and once the animations ends , take out the second animation class and add again the first animation class, all of this in the TS file, have some problems coding the jQuery in the TS file but the framework helps me out with the correct form of the code

So first in my <input> I added the class offMenu to identify my input, also I leave the animate__animated so I dont have to add it every time I take out or add an animation class and also I leave the animate__slideInLeft because I want to animate第一次加載頁面時的input 。

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

接下來在構造函數部分的 TS 文件中，我編寫 jQuery function，創建 3 個變量：

• 第一個是effects ，這個變量保存了第二個效果，即animate__bounceOutRight 。
• 第二個變量是effectsEnd ，它保存了 Animate.css 必須檢測到 animation 何時針對不同瀏覽器結束的不同類。
• 第三個是保存我想要添加或刪除類的元素，在這種情況下是我使用class offMenu的input 。
• 如果您想再添加一個變量來保存您當前擁有的動畫 class，您可以這樣做。

Next I select the element I want to add and remove classes and call the event on click once again in the function I select the element and remove the firts animate class 'animate__slideInLeft' as this animation already end theres no need to add the effectsEnd variable, next I add the second animation class that is saved in my variable effects , then with one we indicate this is going to happen one time and check fot the animation to end with the variable effectsEnd once the animation ends, we remove the animation class effects and添加第一個 animation 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')
          });
      });
    })
  }

使用此代碼，您可以放置一個 animation 以顯示頁面加載時間，然后在單擊元素時添加另一個 animation 並在輸出 animation 完成后收回該元素，