目次
1.遷移遷移アニメーションの原理
要素が遷移タグによってラップされると、Vue はラップされた要素の css スタイルを自動的に分析し、アニメーション プロセスを構築します。
アニメーションの実行が開始される瞬間に、2 つのスタイルが div タグに追加されます: フェード エンター、フェード エンター アクティブ. アニメーションの最初のフレームが終了し、2 番目のフレームが開始すると、フェード エンター スタイルが適用されます。同時にフェード・エンター・スタイルを削除および追加できます。フェード エンター アクティブとフェード エンター トゥーの両方が、アニメーションの実行の最後に削除されます。
ヒント：
トランジションの名前は名前で、name 属性のない vue の追加スタイルは v-enter と v-enter-active です
アニメーション非表示のプロセスでは、原則は次のとおりです。
プロセスはアピール表示プロセスと同じです
コード例は次のとおりです。
<template>
<div>
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="change">切换</button>
</div>
</template>
<script scoped>
export default {
name: 'BaseAnimate',
data () {
return {
show: true
}
},
methods: {
change () {
this.show = !this.show
}
}
}
</script>
<style scoped>
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity 1s;
}
</style>効果：
二、キーフレームキーフレームを使う
<template>
<div>
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="change">切换</button>
</div>
</template>
<script>
export default {
name: 'keyframes',
data () {
return {
show: true
}
},
methods: {
change () {
this.show = !this.show
}
}
}
</script>
<style scoped>
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
//会自动在页面中name为fade的标签上插入这个样式，或者直接在标签上写enter-active-class和leave-active-class，将写好的css样式名字赋上即可
.fade-enter-active{
transform-origin: left center;
animation: bounce-in 1s;
}
.fade-leave-active{
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>//也可以使用from to 相当于0%-100%
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}効果
3. vue で animate.css を使用する
最初に npm を使用して animate.css をインストールします
npm install animate.css --save
次にmian.jsにインポートします
「animate.css」からアニメーションをインポート Vue.use(animate)
コードは次のとおりです。animated はグローバル変数に似ており、アニメーションの持続時間を定義します。デフォルトは 1 秒です。swing は、アニメーションの特定のアニメーション効果の名前で、任意の効果を選択できます。具体的な効果は、公式 Web サイトのドキュメントanimate.css animation demo_dowebokで確認できます。
enter-active-class と leave-active-class を使用する必要があります
<transition name="fade"
enter-active-class="animated swing "
leave-active-class="animated shake "
>
<div v-if="show">hello world</div>
</transition>効果：
トランジションとアニメーションを併用する
enter-active-class の後にカスタム遷移アニメーションを追加
<transition name="fade"
type="transition"
:duration="{enter:5000,leave:10000}"
//enter和leave分别为入场动画和出场动画的时间
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
<!-- type="transition" 设置动画是以transition时间为标准结束还是animate时间为标准结束，animate默认时长是1s-->
<!-- appear-active-class 在页面刷新的时候展示动画效果与appear同时使用-->
<!-- :duration="5000" 自定义动画时长 在此结束后才移除class-->
<div v-if="show">hello world</div>
</transition>
<style scoped>
.fade-enter,.fade-leave-to {
opacity: 0;
}
.fade-enter-active {
transform-origin: left center;
transition: opacity 1s;
}
.fade-leave-active {
transform-origin: left center;
transition: opacity 1s;
}
</style>