animate.css - zorroe

インストール#

npm を使用して

npm install animate.css --save
yarn を使用して

yarn add animate.css

インポート

import 'animate.css';
または CSS ファイルを直接インポート

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>

基本的な使い方#

<h1 class="animate__animated animate__bounce">アニメーションされた要素</h1>

JavaScript を組み合わせてクリックでアニメーションをトリガーする#

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <title>Document</title>
  </head>
  <body>
    <div style="width: 100%; display: flex; justify-content: center">
      <h1 id="animated">アニメーションされた要素</h1>
    </div>
  </body>

  <script>
    const animateCSS = (element, animation, prefix = "animate__") => {
      // Promiseを作成して返す
      new Promise((resolve, reject) => {
        const animationName = `${prefix}${animation}`;
        const node = document.querySelector(element);

        node.classList.add(`${prefix}animated`, animationName);

        // アニメーションが終了したら、クラスを削除してPromiseを解決する
        function handleAnimationEnd(event) {
          event.stopPropagation();
          node.classList.remove(`${prefix}animated`, animationName);
          resolve("アニメーションが終了しました");
        }
        node.addEventListener("animationend", handleAnimationEnd, {
          once: true,
        });
      });
    };

    document.getElementById("animated").addEventListener("click", () => {
      animateCSS("#animated", "bounce");
    });
  </script>
</html>