Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應(yīng)用過渡效果。
包括以下工具：
在 CSS 過渡和動畫中自動應(yīng)用 class
可以配合使用第三方 CSS 動畫庫，如 Animate.css
在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js
Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加 entering/leaving 過渡
條件渲染 (使用 v-if)
條件展示 (使用 v-show)
動態(tài)組件
組件根節(jié)點
<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">首頁a>
??????????????? <transition name="fade">
??????????????????? <ul class="submenu" v-if="!show">
??????????????????????? <li>首頁5li>
??????????????????????? <li>首頁4li>
??????????????????????? <li>首頁3li>
??????????????????????? <li>首頁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;
}
常用的過渡都是css過渡
**vue知識點**
1.*v-on:click? 簡寫成 @click
2.對于這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴。使用 可以重置前綴，比如 v-enter 替換為 my-transition-enter。
