Vue 在插入绽族、更新或者移除 DOM 時(shí)严肪，提供多種不同方式的應(yīng)用過(guò)渡效果史煎。
包括以下工具：
在 CSS 過(guò)渡和動(dòng)畫中自動(dòng)應(yīng)用 class
可以配合使用第三方 CSS 動(dòng)畫庫(kù)，如 Animate.css
在過(guò)渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 動(dòng)畫庫(kù)驳糯，如 Velocity.js
Vue 提供了 transition 的封裝組件篇梭，在下列情形中，可以給任何元素和組件添加 entering/leaving 過(guò)渡
條件渲染 (使用 v-if)
條件展示 (使用 v-show)
動(dòng)態(tài)組件
組件根節(jié)點(diǎn)
<div id="demo">
? ?<button @click="show = !show">Tigglebutton>
??? <transition name="fade">
??????? <p v-if="show">hellop>
??? transition>
??? <nav class="nav">
??????? <ul>
??????????? <li>
??????????????? <a href="#" @click="show = !show">首頁(yè)a>
??????????????? <transition name="fade">
??????????????????? <ul class="submenu" v-if="!show">
??????????????????????? <li>首頁(yè)5li>
??????????????????????? <li>首頁(yè)4li>
??????????????????????? <li>首頁(yè)3li>
??????????????????????? <li>首頁(yè)2li>
??????????????????? ul>
??????????????? transition>
??????????? li>
??????????? <li><a href="#">理念a>li>
??????????? <li><a href="#">歷史a>li>
??????????? <li><a href="#">關(guān)于我們a>li>
??????????? <li><a href="#">聯(lián)系我們a>li>
??????? ul>
??? nav>
div>
new Vue({
??? el:'#demo',
??? data:{
??????? show :true
??? }
})
<CSS>
.fade-enter-active,.fade-leave-active{
??? transition: opacity 0.5s;
}
.fade-enter,.fade-leave-to{
??? opacity:0;
}
常用的過(guò)渡都是css過(guò)渡
**vue知識(shí)點(diǎn)**
1.*v-on:click? 簡(jiǎn)寫成 @click
2.對(duì)于這些在 enter/leave 過(guò)渡中切換的類名酝枢，v- 是這些類名的前綴恬偷。使用 可以重置前綴，比如 v-enter 替換為 my-transition-enter帘睦。
