Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
<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="#">关于我们a>li>
<li><a href="#">联系我们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。
