Vue を使用してアニメーション効果を実現する方法を説明します (コード付き)

前回の記事「CSS3を使って簡単なページレイアウトを作成する方法をステップバイステップで教えます(詳細なコード説明)」では、CSS3を使って簡単なページレイアウトを作成する方法を紹介しました。ページレイアウト。以下の記事では、Vue を使ってアニメーション効果を実現する方法を紹介しますので、困っている方は参考にしていただければ幸いです。

#公式 API アドレス: https://cn.vuejs.org/v2/guide/transitions.html

公式

デモクリックして表示/非表示

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
<script>
  new Vue({
    el: "#demo",
    data: {
      show: true,
    },
  });
</script>
<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
</style>

トランジション使用

<transition name="fade">
  (元素，属性、路由....)
</transition>

クラス<strong></strong>Definition

.fade-enter{ }トランジションの開始状態を入力します。これは要素が挿入されたときに有効になり、フレームを 1 つだけ適用するとすぐに削除されます。 ; (モーションの初期状態)

.fade-enter-active{ }トランジションの終了状態を入力します。これは要素が挿入されたときに有効になり、t# の後に削除されます。 ##アニメーション/アニメーション##が完成しました。このクラスは、遷移プロセス時間、遅延、および曲線関数を定義するために使用できます。 .fade-leave{ }

トランジションの開始状態を残し、要素が削除されるとトリガーされ、フレームを 1 つだけ適用するとすぐに削除されます。

.fade-leave-active{ }

トランジションの終了状態を残し、要素が削除されると有効になり、

transition/animation が完了すると削除されます。このクラスは、遷移プロセス時間、遅延、および曲線関数を定義するために使用できます。 カスタマイズされた遷移クラス名

デフォルトの

.fade-enter
• は

  .fade-in-enter

  #デフォルトの
.fade-enter-active
• は

  .fade-in-active

  # #Default
.fade-leave
• は

  になります。 .fade-out-enter

  Default
.fade-leave-active
• は ## になります# .fade-out-active

  <pre class="brush:php;toolbar:false">&lt;transition name=&quot;fade&quot; enter-class=&quot;fade-in-enter&quot; enter-active-class=&quot;fade-in-active&quot; leave-class=&quot;fade-out-enter&quot; leave-active-class=&quot;fade-out-active&quot; &gt; &lt;p v-show=&quot;show&quot;&gt;hello&lt;/p&gt; &lt;/transition&gt;</pre><pre class="brush:php;toolbar:false">.fade-in-active, .fade-out-active { transition: all 0.5s ease; } .fade-in-enter, .fade-out-active { opacity: 0; }</pre>

  transition
関連関数

<transition
  name="fade"
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
>
  <div v-show="show"></div>
</transition>
<script>
  export default {
    methods: {
      beforeEnter(el) {
        console.log("动画enter之前");
      },
      enter(el) {
        console.log("动画enter进入");
      },
      afterEnter(el) {
        console.log("动画进入之后");
        el.style.background = "blue";
      },
      beforeLeave(el) {
        console.log("动画leave之前");
      },
      leave(el) {
        console.log("动画leave");
      },
      afterLeave(el) {
        console.log("动画leave之后");
        el.style.background = "red";
      },
    },
  };
</script>

transition ##と組み合わせる#animate.css

使用

次のコードは、X 軸をベースラインとして要素を反転および反転させるアニメーションを示しています。Animate.css ライブラリ ポイントは次のとおりです。アドレス: https://animate.style/

<!-- 翻转进场出场-->
<transition enter-active-class="flipInX" leave-active-class="flipOutX">
  <div v-show="show" class="animated"></div>
</transition>
<!-- 或者 -->
<transition
  enter-active-class="animated flipInX"
  leave-active-class="animated flipOutX"
>
  <div v-show="show"></div>
</transition>

リスト遷移<pre class="brush:php;toolbar:false">&lt;transition-group enter-active-class=&quot;flipInX&quot; leave-active-class=&quot;flipOutX&quot;&gt; &lt;div v-show=&quot;show&quot; :key=&quot;x&quot; v-for=&quot;x in 5&quot;&gt;&lt;/div&gt; &lt;/transition-group&gt;</pre>

グループ化する場合、キーの値がアニメーションに直接影響することに注意してください。トランジションの詳細については、

vue アニメーション キー値がトランジション アニメーションのパフォーマンスに影響するを参照してください

推奨学習: JavaScript ビデオ チュートリアル

以上がVue を使用してアニメーション効果を実現する方法を説明します (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。