Vue.js 相关知识（动画）
1. 簡(jiǎn)介
Vue 在插入、更新或移除 DOM 時(shí)，提供多種不同方式的過(guò)渡效果，并提供 transition 組件來(lái)實(shí)現(xiàn)動(dòng)畫效果（用 transition 組件將需執(zhí)行過(guò)渡效果的元素包裹）
語(yǔ)法：<transition name=””>元素或組件（進(jìn)入或離開(kāi)時(shí)會(huì)有動(dòng)畫效果）</transition>
name?屬性是執(zhí)行動(dòng)畫效果的 css 類名，與6個(gè) css 類產(chǎn)生關(guān)聯(lián)：
假設(shè) transition 的 name為v，transition 組件會(huì)自動(dòng)在不同時(shí)機(jī)添加如下6個(gè)類：
- v-enter：定義過(guò)渡開(kāi)始狀態(tài)的樣式
- v-enter-active：定義過(guò)渡的狀態(tài)，該類常被用來(lái)定義過(guò)渡的過(guò)程時(shí)間、延遲、曲線函數(shù)。
- v-enter-to：定義過(guò)渡結(jié)束狀態(tài)的樣式（vue 2.1.8以上版本）
- v-leave：定義離開(kāi)之前的樣式
- v-leave-active：定義從0到1過(guò)程中的樣式
- v-leave-to：定義到達(dá)目的地之后的效果
2. 執(zhí)行動(dòng)畫的情況
動(dòng)畫只在2個(gè)節(jié)點(diǎn)發(fā)生：
- 進(jìn)入：從不顯示到顯示（v-show），從無(wú)到有。
- 離開(kāi)：從顯示到不顯示（v-show），從有到無(wú)。
條件渲染（使用v-if）：根據(jù)條件控制元素添加、刪除
條件展示（使用v-show）：根據(jù)條件控制元素顯示、隱藏
動(dòng)態(tài)組件（使用:is）：多個(gè)組件切換（涉及到組件顯示、隱藏）
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><script type="text/javascript" src="vue.js"></script> <style type="text/css">.v-enter{opacity: 0}.v-enter-to{opacity: 1}.v-enter-active{transition: all 1s}.v-leave{opacity: 1}.v-leave-to{opacity: 0}.v-leave-active{transition:all 1s}</style> </head> <body><div id="app"><div class="title"><h3 @click="isshow=!isshow">標(biāo)題</h3></div><transition name="v"><div class="content" v-show="isshow"><p>內(nèi)容</p></div></transition></div><script type="text/javascript">let app = new Vue({el:"#app",data:{isshow:true}}) app.$mount('#app')</script> </body> </html>可將<style>中的內(nèi)容簡(jiǎn)化為：
<style type="text/css">.v-enter,.v-leave-to{opacity: 0}.v-enter-active,.v-leave-active{transition: all 1s} </style>3. transition-group
- 若給一個(gè)元素綁定動(dòng)畫效果，使用<transition>組件
- 若給多個(gè)元素綁定動(dòng)畫效果，使用<transition-group>組件
為了區(qū)分元素列表，需要給子元素增加:key屬性，表示每個(gè)子元素的索引
語(yǔ)法：<transition-group name=””> <元素1 :key=””></元素1> <元素2 :key=””></元素2> </transition-group>
4. 內(nèi)置 css 類實(shí)現(xiàn)過(guò)渡
除在?transition?組件上增加?name?屬性，來(lái)實(shí)現(xiàn)動(dòng)畫效果外，Vue還提供6個(gè)內(nèi)置的類，可直接在transition組件上使用（為了兼容 animate.css 框架）
https://daneden.github.io/animate.css/
- enter-class：相當(dāng)于.v-enter
- enter-active-class：相當(dāng)于.v-enter-active
- enter-to-class：(2.1.8之后)
- leave-class
- leave-active-class
- leave-to-class：(2.1.8之后)
例：結(jié)合vue.js和animate.css動(dòng)畫框架實(shí)現(xiàn)一些動(dòng)態(tài)效果
注：無(wú)需指定開(kāi)始、結(jié)束狀態(tài)時(shí)的css樣式（animate.css中已指定）
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="animate.css"><script type="text/javascript" src="vue.js"></script> <style type="text/css">.dialog{width: 300px;height: 300px;background: #333;color: #fff;}</style> </head> <body><div id="app"><button @click="isshow=!isshow">按鈕</button><transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp"><div class="dialog" v-show="isshow">內(nèi)容</div></transition></div><script type="text/javascript">let app = new Vue({el:"#app",data:{isshow:false}}) </script> </body> </html>5. 鉤子函數(shù)實(shí)現(xiàn)過(guò)渡
先指定不同階段執(zhí)行的js函數(shù)，在該函數(shù)中實(shí)現(xiàn)該階段的css動(dòng)畫（通常結(jié)合 velocity.js、move.js 等JavaScript動(dòng)畫框架實(shí)現(xiàn)）。在鉤子函數(shù)中，會(huì)自動(dòng)將執(zhí)行過(guò)渡效果的元素傳遞到鉤子函數(shù)中。
語(yǔ)法：
<transitionv-on:before-enter=”beforeEnter”v-on:enter=”enter”v-on:after-enter=”afterEnter”v-on:enter-cancelled=”enterCancelled”v-on:before-leave=”beforeLeave”v-on:leave=”leave”v-on:after-leave=”afterLeave”v-on:leave-cancelled=”leaveCancelled”> </transition>例子：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.0/velocity.min.js"></script><script type="text/javascript" src="vue.js"></script> <style type="text/css">.dialog{width: 300px;height: 300px;background: #333;color: #fff;}</style> </head> <body><div id="app"><button @click="isshow=!isshow">按鈕</button><transition v-on:before-enter="beforeEnter" v-on:enter="Enter"><div class="dialog" v-show="isshow">內(nèi)容</div></transition></div><script type="text/javascript">let app = new Vue({el:"#app",data:{isshow:false},methods:{beforeEnter(el){el.style.opacity = 0;},Enter(el){Velocity(el,{opacity:1,fontSize:"2em"},{duration:1000})Velocity(el,{backgroundColor:"#666"})}}}) </script> </body> </html>更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的Vue.js 相关知识（动画）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： attr和prop的区别以及在企业开发中
- 下一篇： html5倒计时秒杀怎么做,vue 设