ホームページ > 記事 > ウェブフロントエンド > Vue3でトランジションアニメーションを実装するにはどうすればよいですか?コンポーネントおよびアニメーション ライブラリのメソッド分析
Vue でトランジション アニメーションを実装するにはどうすればよいですか?以下の記事では、Vue3 でトランジションアニメーションを実装する 2 つの方法 (トランジションコンポーネントとアニメーションライブラリ) を紹介します。
実際の開発では、ユーザーエクスペリエンスを高めるためにトランジションアニメーションがよく使われ、CSSではtransition
を介してトランジションアニメーションが使用されます。 と animation
が実装されています。 Vue には、トランジション アニメーション効果を簡単に実装できる組み込みコンポーネントと API がいくつかあります。次にそれらについて学びましょう。
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 'vue' import HelloWorld from './components/HelloWorld.vue' 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>
コードの実行結果は以下のとおりです:
##Someclass 上で使用した、その意味は次のとおりです。
: エントリ遷移の開始状態を定義します。これは要素が挿入される前に有効になり、要素が挿入された後の次のフレームで削除されます。
: エントリ遷移が有効になるときの状態を定義します。トランジション全体に適用され、要素が挿入される前に有効になり、トランジション/アニメーションの完了後に削除されます。このクラスは、遷移を入力するための処理時間、遅延、および曲線関数を定義するために使用できます。
: エントリ遷移の終了状態を定義します。要素が挿入された後の次のフレームで有効になり (同時に
v-enter-from が削除されます)、トランジション/アニメーションの完了後に削除されます。
: 離脱遷移の開始状態を定義します。これは、離脱トランジションがトリガーされるとすぐに有効になり、次のフレームで削除されます。
: 離脱遷移が有効になるときの状態を定義します。終了トランジション全体に適用され、終了トランジションがトリガーされるとすぐに有効になり、トランジション/アニメーションが完了すると削除されます。このクラスを使用して、処理時間、遅延、終了遷移の曲線関数を定義できます。
: 遷移の終了状態を残します。 Leave トランジションがトリガーされた後の次のフレームで有効になり (同時に
v-leave-from が削除されます)、トランジション/アニメーションの完了後に削除されます。
コンポーネントの
class 名には、プレフィックス
v- を付ける必要はありません。実際、カスタマイズできます。
name 属性 (例:
) を追加する必要があります。そうすると、すべてのプレフィックスが
ywz- になります。
transition 属性を使用しました。ここで ## を使用できるようになります。 #animation
属性の実装、サンプル コードは次のとおりです。 <pre class="brush:html;toolbar:false;"><transition>
<hello-world v-if="helloWorldShow" msg="【一碗周】过渡动画演示demo" />
</transition></pre>
<pre class="brush:css;toolbar:false;">/* 离开和进入过程中的样式 */
.v-enter-active,
.v-leave-active {
/* 添加过渡动画 */
transition: opacity 0.5s ease;
}</pre>
コードの実行結果は次のとおりです。
トランジション モード
<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 'vue' import HelloWorld from './components/HelloWorld.vue' const show = ref(true) </script> <style> /* 省略 */ </style>
実行時の効果は次のとおりです:
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>
现在的运行结果如下:
<transition></transition>
组件的appear
属性用于开启手册渲染的动画,它接受一个布尔值,示例代码如下:
<transition mode="out-in" appear> <img v-if="show" alt="Vue logo" src="./assets/logo.png" /> </transition>
如果我们在实际的开发中自己去一个一个的编写这些动画序列,那么效率是比较低下的,所以我们经常会用到一些动画库,最常见的就是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; }
<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 サイトの他の関連記事を参照してください。