MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. アニメーション(単一)

アニメーション(単一)

Vue.js
2024.06.02
記事の内容

概要

transitionコンポーネントとは、テンプレート要素に対してアニメーションを付けることができます。

条件付き描画 : v-if / v-show
リスト追加や削除 : v-for
動的コンポーネント

transition
記法

【HTML】
<transition name=”アニメーション効果”>
　// テンプレートや要素
</transition>
=============================
【css】※効果を指定したい箇所のみ
.効果名-enter-active { プロパティ名 : 設定値; }
.効果名-leave-active {プロパティ名 : 設定値;}
.効果名-enter-from {プロパティ名 : 設定値;}
.効果名-leave-from {プロパティ名 : 設定値;}
.効果名-enter-to {プロパティ名 : 設定値;}
.効果名-leave-to {プロパティ名 : 設定値;}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Transitionについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app">
      <button @click="toggle">切り替え</button>
      <transition name="fade">
        <p v-if="show" class="message">
          こんにちは！これはトランジションの例です。
        </p>
      </transition>
    </div>

    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
Vue.createApp({
  data() {
    return {
      show: true,
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
}).mount("#app");
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.message {
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
出力結果

こんにちは！これはトランジションの例です。

スタイルクラス

要素によって付与されているスタイルクラスが以下になります。
※vの箇所にアニメーション効果名が入る

分類アニメーションクラス説明
開始v-enter-from要素が挿入される直前の状態を定義
開始v-leave-from要素が削除される直前の状態を定義
最中v-enter-active要素が挿入される全体の期間中に適用
最中v-leave-active要素が削除される全体の期間中に適用
終了v-enter-to要素が挿入される最終フレームで適用
終了v-leave-to要素が削除される最終フレームで適用
transition
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transitionについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app">
      <div class="button-container">
        <button @click="toggleFade">Fade Toggle</button>
        <transition name="fade">
          <p v-if="showFade" class="fade-text">
            これはフェードイン/アウトの例です。
          </p>
        </transition>
      </div>

      <div class="button-container">
        <button @click="toggleSlide">Slide Toggle</button>
        <transition name="slide">
          <p v-if="showSlide" class="slide-text">これはスライドの例です。</p>
        </transition>
      </div>

      <div class="button-container">
        <button @click="toggleBounce">Bounce Toggle</button>
        <transition name="bounce">
          <p v-if="showBounce" class="bounce-text">これはバウンスの例です。</p>
        </transition>
      </div>

      <div class="button-container">
        <button @click="toggleScale">Scale Toggle</button>
        <transition name="scale">
          <p v-if="showScale" class="scale-text">これはスケールの例です。</p>
        </transition>
      </div>

      <div class="button-container">
        <button @click="toggleRotate">Rotate Toggle</button>
        <transition name="rotate">
          <p v-if="showRotate" class="rotate-text">
            これはローテートの例です。
          </p>
        </transition>
      </div>
    </div>

    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
Vue.createApp({
  data() {
    return {
      showFade: true,
      showSlide: true,
      showBounce: true,
      showScale: true,
      showRotate: true,
    };
  },
  methods: {
    toggleFade() {
      this.showFade = !this.showFade;
    },
    toggleSlide() {
      this.showSlide = !this.showSlide;
    },
    toggleBounce() {
      this.showBounce = !this.showBounce;
    },
    toggleScale() {
      this.showScale = !this.showScale;
    },
    toggleRotate() {
      this.showRotate = !this.showRotate;
    },
  },
}).mount("#app);
/* ボタンとコンテンツがそれぞれのブロック内に留まるようにするためのコンテナ */
.button-container {
  margin-bottom: 20px;
}

/* フェードアニメーション */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* スライドアニメーション */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter-from,
.slide-leave-to {
  transform: translateY(30px);
  opacity: 0;
}

/* バウンスアニメーション */
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-out 0.5s;
}
@keyframes bounce-in {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}
@keyframes bounce-out {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.5;
  }
}

/* スケールアニメーション */
.scale-enter-active,
.scale-leave-active {
  transition: transform 0.5s;
}
.scale-enter-from,
.scale-leave-to {
  transform: scale(0.8);
  opacity: 0;
}

/* ローテートアニメーション */
.rotate-enter-active,
.rotate-leave-active {
  transition: transform 0.5s;
}
.rotate-enter-from,
.rotate-leave-to {
  transform: rotate(90deg);
  opacity: 0;
}

/* テキストの追加スタイリング */
.fade-text,
.slide-text,
.bounce-text,
.scale-text,
.rotate-text {
  margin: 10px 0;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
}
出力結果

これはフェードイン/アウトの例です。

これはスライドの例です。

これはバウンスの例です。

これはスケールの例です。

これはローテートの例です。

イージング

イージングとは、アニメーション変化の度合い(スピード感)を表す情報になります。

設定値説明
ease開始/終了を緩やかに
linear一定の変化
ease-in緩やかに開始
ease-out緩やかに終了
ease-in-out開始/終了を緩やかに(easeとほぼ同じ)
cubic-bezier(x1,y1,x2,y2)制御点(x1,y1)(x2,y2)からできるべジュ曲線
イージング
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transition(イージング)について</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="easing-app">
      <div class="button-container">
        <button @click="toggleEase">Ease Toggle</button>
        <transition name="ease">
          <p v-if="showEase" class="ease-text">これはEaseの例です。</p>
        </transition>
      </div>

      <div class="button-container">
        <button @click="toggleLinear">Linear Toggle</button>
        <transition name="linear">
          <p v-if="showLinear" class="linear-text">これはLinearの例です。</p>
        </transition>
      </div>

      <div class="button-container">
        <button @click="toggleCubic">Cubic-bezier Toggle</button>
        <transition name="cubic">
          <p v-if="showCubic" class="cubic-text">
            これはCubic-bezierの例です。
          </p>
        </transition>
      </div>
    </div>

    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
Vue.createApp({
  data() {
    return {
      showEase: true,
      showLinear: true,
      showCubic: true,
    };
  },
  methods: {
    toggleEase() {
      this.showEase = !this.showEase;
    },
    toggleLinear() {
      this.showLinear = !this.showLinear;
    },
    toggleCubic() {
      this.showCubic = !this.showCubic;
    },
  },
}).mount("#easing-app");
/* ボタンとコンテンツがそれぞれのブロック内に留まるようにするためのコンテナ */
.button-container {
  margin-bottom: 20px;
}

/* Easeアニメーション */
.ease-enter-active,
.ease-leave-active {
  transition: opacity 0.5s ease;
}
.ease-enter-from,
.ease-leave-to {
  opacity: 0;
}
.ease-enter-to,
.ease-leave-from {
  opacity: 1;
}

/* Linearアニメーション */
.linear-enter-active,
.linear-leave-active {
  transition: opacity 0.5s linear;
}
.linear-enter-from,
.linear-leave-to {
  opacity: 0;
}
.linear-enter-to,
.linear-leave-from {
  opacity: 1;
}

/* Cubic-bezierアニメーション */
.cubic-enter-active,
.cubic-leave-active {
  transition: opacity 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.cubic-enter-from,
.cubic-leave-to {
  opacity: 0;
}
.cubic-enter-to,
.cubic-leave-from {
  opacity: 1;
}

/* テキストの追加スタイリング */
.ease-text,
.linear-text,
.cubic-text {
  margin: 10px 0;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
}
出力結果

これはEaseの例です。

これはLinearの例です。

これはCubic-bezierの例です。

キーフレーム

アニメーションの特定のポイントに対するスタイルを指定するために使用されます。

開始 : 0%
終了 : 100%

キーフレーム
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transition(キーフレーム)について</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app">
      <div class="button-container">
        <button @click="toggleFade">複雑フェード</button>
        <transition name="complex-fade">
          <p v-if="showFade" class="message">複雑なフェードイン・アウトの例</p>
        </transition>
      </div>
      <div class="button-container">
        <button @click="toggleRotateScale">回転・スケール</button>
        <transition name="rotate-scale">
          <p v-if="showRotateScale" class="message">回転・スケールの例</p>
        </transition>
      </div>
      <div class="button-container">
        <button @click="toggleSlideScale">スライド・スケール</button>
        <transition name="slide-scale">
          <p v-if="showSlideScale" class="message">スライド・スケールの例</p>
        </transition>
      </div>
    </div>
    
    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html> 
Vue.createApp({
  data() {
    return {
      showFade: true,
      showRotateScale: true,
      showSlideScale: true,
    };
  },
  methods: {
    toggleFade() {
      this.showFade = !this.showFade;
    },
    toggleRotateScale() {
      this.showRotateScale = !this.showRotateScale;
    },
    toggleSlideScale() {
      this.showSlideScale = !this.showSlideScale;
    },
  },
}).mount("#app");
/* ボタンとコンテンツがそれぞれのブロック内に留まるようにするためのコンテナ */
.button-container {
  margin-bottom: 20px;
}

/* 複雑なフェードイン・アウト */
@keyframes complex-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  50% {
    opacity: 0.5;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes complex-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.complex-fade-enter-active {
  animation: complex-fade-in 0.8s;
}

.complex-fade-leave-active {
  animation: complex-fade-out 0.8s;
}

/* 回転とスケール */
@keyframes rotate-scale-in {
  0% {
    transform: rotate(-360deg) scale(0);
  }
  50% {
    transform: rotate(-180deg) scale(0.5);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes rotate-scale-out {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(0.5);
  }
  100% {
    transform: rotate(360deg) scale(0);
  }
}

.rotate-scale-enter-active {
  animation: rotate-scale-in 1s;
}

.rotate-scale-leave-active {
  animation: rotate-scale-out 1s;
}

/* スライドイン・アウトとスケール */
@keyframes slide-scale-in {
  0% {
    transform: translateX(100%) scale(0);
  }
  50% {
    transform: translateX(-10%) scale(1.2);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes slide-scale-out {
  0% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(10%) scale(1.2);
  }
  100% {
    transform: translateX(-100%) scale(0);
  }
}

.slide-scale-enter-active {
  animation: slide-scale-in 0.8s;
}

.slide-scale-leave-active {
  animation: slide-scale-out 0.8s;
}

.message {
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  margin: 10px 0;
}
出力結果

複雑なフェードイン・アウトの例

回転・スケールの例

スライド・スケールの例

Vue.js
記事の内容
閉じる