之前的文章《手把手教你使用CSS3制作一個(gè)簡(jiǎn)單頁(yè)面的布局（代碼詳解）》中，給大家介紹了怎么使用CSS3制作一個(gè)簡(jiǎn)單頁(yè)面的布局。下面本篇文章給大家介紹怎么使用Vue實(shí)現(xiàn)動(dòng)畫(huà)效果，有需要的朋友可以參考一下，希望對(duì)你們有幫助。

官網(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)入過(guò)渡的開(kāi)始狀態(tài)，元素被插入時(shí)生效，只應(yīng)用一幀后立即刪除；(運(yùn)動(dòng)的初始狀態(tài))

.fade-enter-active{ }進(jìn)入過(guò)渡的結(jié)束狀態(tài)，元素被插入時(shí)就生效，在transition/animation完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。

.fade-leave{ }離開(kāi)過(guò)渡的開(kāi)始狀態(tài)，元素被刪除時(shí)觸發(fā)，只應(yīng)用一幀后立即刪除；

.fade-leave-active{ }離開(kāi)過(guò)渡的結(jié)束狀態(tài)，元素被刪除時(shí)生效，在transition/animation完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。

自定義過(guò)度類(lèi)名

• 默認(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)畫(huà)enter之前");       },       enter(el) {         console.log("動(dòng)畫(huà)enter進(jìn)入");       },       afterEnter(el) {         console.log("動(dòng)畫(huà)進(jìn)入之后");         el.style.background = "blue";       },       beforeLeave(el) {         console.log("動(dòng)畫(huà)leave之前");       },       leave(el) {         console.log("動(dòng)畫(huà)leave");       },       afterLeave(el) {         console.log("動(dòng)畫(huà)leave之后");         el.style.background = "red";       },     },   }; </script>

transition結(jié)合animate.css使用

以下代碼演示元素以 X 軸為基線，翻轉(zhuǎn)進(jìn)場(chǎng)出場(chǎng)的動(dòng)畫(huà)Animate.css 庫(kù)點(diǎn)這里地址：https://animate.style/

<!-- 翻轉(zhuǎn)進(jìn)場(chǎng)出場(chǎng)--> <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>

列表過(guò)渡

<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)畫(huà)的過(guò)渡。

推薦學(xué)習(xí)：JavaScript視頻教程