下面本篇文章給大家介紹怎么使用Vue實(shí)現(xiàn)動(dòng)畫效果，有需要的朋友可以參考一下，希望對你們有幫助。
官網(wǎng) API 地址:https://cn.vuejs.org/v2/guide/transitions.html
官方的demo點(diǎn)擊顯示與消失
<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 使用
<transition name="fade"> (元素，屬性、路由....) </transition>
class定義
.fade-enter{ }進(jìn)入過渡的開始狀態(tài)，元素被插入時(shí)生效，只應(yīng)用一幀后立即刪除；(運(yùn)動(dòng)的初始狀態(tài))
.fade-enter-active{ }進(jìn)入過渡的結(jié)束狀態(tài)，元素被插入時(shí)就生效，在transition/animation完成之后移除。這個(gè)類可以被用來定義過渡的過程時(shí)間，延遲和曲線函數(shù)。
.fade-leave{ }離開過渡的開始狀態(tài)，元素被刪除時(shí)觸發(fā)，只應(yīng)用一幀后立即刪除；
.fade-leave-active{ }離開過渡的結(jié)束狀態(tài)，元素被刪除時(shí)生效，在transition/animation完成之后移除。這個(gè)類可以被用來定義過渡的過程時(shí)間，延遲和曲線函數(shù)。
自定義過度類名
默認(rèn)的 .fade-enter變成 .fade-in-enter
默認(rèn)的 .fade-enter-active變成 .fade-in-active
默認(rèn)的 .fade-leave變成 .fade-out-enter
默認(rèn)的 .fade-leave-active變成 .fade-out-active
<transition name="fade" enter-class="fade-in-enter" enter-active-class="fade-in-active" leave-class="fade-out-enter" leave-active-class="fade-out-active" > <p v-show="show">hello</p> </transition>
.fade-in-active,
.fade-out-active {
transition: all 0.5s ease;
}
.fade-in-enter,
.fade-out-active {
opacity: 0;
}transition相關(guān)函數(shù)
<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("動(dòng)畫enter之前");
},
enter(el) {
console.log("動(dòng)畫enter進(jìn)入");
},
afterEnter(el) {
console.log("動(dòng)畫進(jìn)入之后");
el.style.background = "blue";
},
beforeLeave(el) {
console.log("動(dòng)畫leave之前");
},
leave(el) {
console.log("動(dòng)畫leave");
},
afterLeave(el) {
console.log("動(dòng)畫leave之后");
el.style.background = "red";
},
},
};
</script>transition結(jié)合animate.css使用
以下代碼演示元素以 X 軸為基線，翻轉(zhuǎn)進(jìn)場出場的動(dòng)畫Animate.css 庫點(diǎn)這里地址：https://animate.style/
<!-- 翻轉(zhuǎn)進(jìn)場出場--> <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>
列表過渡
<transition-group enter-active-class="flipInX" leave-active-class="flipOutX"> <div v-show="show" :key="x" v-for="x in 5"></div> </transition-group>
需要注意的是在group的時(shí)候，key的取值直接影響動(dòng)畫的過渡。
