jQuery 筆記 - Animate.css 套件基本認識

安裝 Animate.css 套件，可以讓網頁動化效果更豐富，可使用 CSS 設定跟 JavaScirpt 控制。

安裝

npm 安裝

$ npm install animate.css --save

yarn 安裝

$ yarn add animate.css

載入 CDN

https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css

可以在官網右側欄位看到很多動畫效果，點擊後可以直接在畫面預覽。

4.0 版本後要加前綴詞 animate__ ，後面底線是兩條。

示範語法：

<h1 class="animate__animated animate__bounce">An animated element</h1>

CSS 設定

使用 @keyframes 設定

.my-element {
  display: inline-block;
  margin: 0 0.5rem;
  //相關設定
  animation: bounce; //動畫效果名稱
  animation-duration: 2s; //要設定持續時間
}

CSS 變數自定義設定方式

//自己動畫持續時間設定
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

//全域動畫效果設定
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

延遲設定

可以直接在 HTML 設定

<div class="animate__animated animate__bounce animate__faster">Example</div>

HTML 標籤設定與延遲預設值

animate__slow	2s
animate__slower	3s
animate__fast	800ms
animate__faster	500ms

在 CSS 設定

//全域設定
:root {
  --animate-duration: 2s;
}

//指定 class 達到特定時間效果
.my-element {
  --animate-duration: 0.5s;
}

animate__animated 有原本速度預設值為 1 秒。

JavaScript 設定

透過控制 DOM 元素結合使用，

HTML

<div class="btnGroup">
  <button class="btn jq-animation">點擊我看動畫</button>
  <p class="text text3">透過 JS 套用效果</p>
</div>

jS 設定

$(function () {
  $(".jq-animation").click(function () {
    $(".text3").addClass("animate__animated animate__backInLeft");
  });
  $(".text3").on("animationend", function () {
    // 監聽當動畫結束後移除 class
    $(this).removeClass("animate__animated animate__backInLeft");
  });
});

參考資料

• Animate.CSS 官網