ホームページ  >  記事  >  ウェブフロントエンド  >  Vue3でトランジションアニメーションを実装するにはどうすればよいですか?コンポーネントおよびアニメーション ライブラリのメソッド分析

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

青灯夜游
青灯夜游転載
2022-02-15 19:21:393607ブラウズ

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

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

実際の開発では、ユーザーエクスペリエンスを高めるためにトランジションアニメーションがよく使われ、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 alt="Vue logo" src="./assets/logo.png" />
  <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>

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

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

##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 ドキュメントからの図であり、プロセス全体を完全に説明しています

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

クラスの命名規則

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

アニメーションの使用

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

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

css

<pre class="brush:css;toolbar:false;">/* 离开和进入过程中的样式 */ .v-enter-active, .v-leave-active { /* 添加过渡动画 */ transition: opacity 0.5s ease; }</pre> コードの実行結果は次のとおりです。

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

トランジション モード

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

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

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

Vue3でトランジションアニメーションを実装するにはどうすればよいですか?コンポーネントおよびアニメーション ライブラリのメソッド分析2 つのコンポーネントが同時に同時に存在していることがわかります。このエフェクトが必要ない場合は、

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

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

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

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

现在的运行结果如下:

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

appear属性

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

<transition mode="out-in" appear>
  <img v-if="show" alt="Vue logo" src="./assets/logo.png" />
</transition>

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

animate.css库的使用

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

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

  • 安装animate.css

npm i animate.css
  • 引入animate.css

// main.jsimport &#39;animate.css&#39;

使用动画序列

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

使用自定义过渡class

<transition></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 v-if="show" alt="Vue logo" src="./assets/logo.png" />
</transition>

写在最后

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

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

更多编程相关知识,请访问:编程视频!!

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

声明:
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。