Vue3でトランジションアニメーションを実装するにはどうすればよいですか?コンポーネントおよびアニメーション ライブラリのメソッド分析

Vue でトランジション アニメーションを実装するにはどうすればよいですか?以下の記事では、Vue3 でトランジションアニメーションを実装する 2 つの方法 (トランジションコンポーネントとアニメーションライブラリ) を紹介します。

実際の開発では、ユーザーエクスペリエンスを高めるためにトランジションアニメーションがよく使われ、CSSではtransitionを介してトランジションアニメーションが使用されます。 と animation が実装されています。 Vue には、トランジション アニメーション効果を簡単に実装できる組み込みコンポーネントと API がいくつかあります。次にそれらについて学びましょう。

Vue のトランジション コンポーネント

Vue は、次のいずれかの状況で要素となる transition コンポーネントを提供します。トランジション効果:

• 使用 v-if条件付きレンダリング
• 使用 v-show条件付き表示
• 動的コンポーネント
• コンポーネントルートノード

使用方法も比較的簡単で、アニメーション表示が必要なコンポーネントや要素を使用するだけです<transition></transition>ラップするだけコンポーネントを作成し、class のセットを定義します。 [関連する推奨事項: vue.js ビデオ チュートリアル ]

移行デモ

次のコードは <transition></transition> を示しています。コンポーネントの基本的な使用法:

<template>
  <button class="btn btn-primary" @click="helloWorldShow = !helloWorldShow">
    显示与隐藏
  </button>
  <br />
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
  <transition>
    <hello-world v-if="helloWorldShow" msg="【一碗周】过渡动画演示demo" />
  </transition>
</template>

<script setup>
import { ref } from &#39;vue&#39;
import HelloWorld from &#39;./components/HelloWorld.vue&#39;
const helloWorldShow = ref(true)
</script>

<style>
#app {
  /* more css */
}
/* 进入之前和离开后的样式 */
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
/* 离开和进入过程中的样式 */
.v-enter-active,
.v-leave-active {
  /* 添加过渡动画 */
  transition: opacity 0.5s ease;
}
/* 进入之后和离开之前的样式 */
.v-enter-to,
.v-leave-from {
  opacity: 1;
}
</style>

コードの実行結果は以下のとおりです:

##Some

class 上で使用した、その意味は次のとおりです。

• v-enter-from: エントリ遷移の開始状態を定義します。これは要素が挿入される前に有効になり、要素が挿入された後の次のフレームで削除されます。
• v-enter-active: エントリ遷移が有効になるときの状態を定義します。トランジション全体に適用され、要素が挿入される前に有効になり、トランジション/アニメーションの完了後に削除されます。このクラスは、遷移を入力するための処理時間、遅延、および曲線関数を定義するために使用できます。
• v-enter-to: エントリ遷移の終了状態を定義します。要素が挿入された後の次のフレームで有効になり (同時に v-enter-from が削除されます)、トランジション/アニメーションの完了後に削除されます。
• v-leave-from: 離脱遷移の開始状態を定義します。これは、離脱トランジションがトリガーされるとすぐに有効になり、次のフレームで削除されます。
• v-leave-active: 離脱遷移が有効になるときの状態を定義します。終了トランジション全体に適用され、終了トランジションがトリガーされるとすぐに有効になり、トランジション/アニメーションが完了すると削除されます。このクラスを使用して、処理時間、遅延、終了遷移の曲線関数を定義できます。
• v-leave-to: 遷移の終了状態を残します。 Leave トランジションがトリガーされた後の次のフレームで有効になり (同時に v-leave-from が削除されます)、トランジション/アニメーションの完了後に削除されます。

次の図は Vue ドキュメントからの図であり、プロセス全体を完全に説明しています

クラスの命名規則

<transition>コンポーネントの class 名には、プレフィックス v- を付ける必要はありません。実際、カスタマイズできます。 name 属性 (例: ) を追加する必要があります。そうすると、すべてのプレフィックスが ywz- になります。

アニメーションの使用

先ほどは、コンポーネントが出入りするトランジション効果を実現するために

transition 属性を使用しました。ここで ## を使用できるようになります。 #animation 属性の実装、サンプル コードは次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;transition&gt; &lt;hello-world v-if=&quot;helloWorldShow&quot; msg=&quot;【一碗周】过渡动画演示demo&quot; /&gt; &lt;/transition&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

css

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>/* 离开和进入过程中的样式 */ .v-enter-active, .v-leave-active { /* 添加过渡动画 */ transition: opacity 0.5s ease; }</pre><div class="contentsignin">ログイン後にコピー</div></div> コードの実行結果は次のとおりです。

トランジション モード

# まず問題を見てみましょう。アニメーションが 2 つの要素間で切り替わるときに問題が発生します。この問題を再現するコードは次のとおりです。次のように:

<template>
  <button class="btn btn-primary" @click="show = !show">显示与隐藏</button>
  <br />
  <transition>
    <hello-world v-if="show" msg="【一碗周】过渡动画演示demo" />
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-else alt="Vue logo"  />
  </transition>
</template>

<script setup>
import { ref } from &#39;vue&#39;
import HelloWorld from &#39;./components/HelloWorld.vue&#39;
const show = ref(true)
</script>

<style>
/* 省略 */
</style>

実行時の効果は次のとおりです:

2 つのコンポーネントが同時に同時に存在していることがわかります。このエフェクトが必要ない場合は、

<transition>

コンポーネントのトランジション モードを設定する必要があります。これは mode 属性で、次の 3 つの値が含まれます。

• default：新元素与当前元素同时进行。
• in-out：新元素先进行进入过渡，完成之后当前元素过渡离开。
• out-in：当前元素先进行离开过渡，完成之后新元素过渡进入。

了解这个属性之后，我们将代码修改一下，修改后如下：

<transition mode="out-in">
  <hello-world v-if="show" msg="【一碗周】过渡动画演示demo" />
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-else alt="Vue logo"  />
</transition>

现在的运行结果如下：

appear属性

<transition>组件的appear属性用于开启手册渲染的动画，它接受一个布尔值，示例代码如下：

<transition mode="out-in" appear>
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-if="show" alt="Vue logo"  />
</transition>

animate.css库的使用

如果我们在实际的开发中自己去一个一个的编写这些动画序列，那么效率是比较低下的，所以我们经常会用到一些动画库，最常见的就是animate.css。

现在我们就来看那一下如何在Vue中使用animate.css：

• 安装animate.css

npm i animate.css

• 引入animate.css

// main.jsimport 'animate.css'

使用动画序列

.v-enter-active {
  animation: fadeInDown 0.5s;
}
.v-leave-active {
  animation: fadeOutDown 0.5s;
}

使用自定义过渡class

<transition>组件还提供了属性来自定义过渡class，具体如下：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

他们的优先级会高于普通的类名。

<transition
  mode="out-in"
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutDown"
>
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-if="show" alt="Vue logo"  />
</transition>

写在最后

本篇文章介绍了过渡的基本使用，掌握Vue提供的<transition></transition>组件配合animate.css可以轻松实现过渡动画。

除了单个组件的过渡外，Vue还提供了TransitionGroup组件，用于实现多个组件的过渡动画，我们以后介绍。

更多编程相关知识，请访问：编程视频！！

以上がVue3でトランジションアニメーションを実装するにはどうすればよいですか?コンポーネントおよびアニメーション ライブラリのメソッド分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。