Vue 过渡（未）
#当从 DOM 中插入、更新或移除项目时，Vue 提供多种应用过渡效果的方式。包括以下工具：
- 在 CSS 过渡和动画中自动处理 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
#当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
-
自动嗅探目标元素是否使用了 CSS 过渡或动画，如果使用，会在合适的时机添加/移除 CSS 过渡 class。
-
如果过渡组件设置了 JavaScript 钩子函数，这些钩子函数将在合适的时机调用。
-
如果没有检测到 CSS 过渡/动画，并且也没有设置 JavaScript 钩子函数，插入和/或删除 DOM 的操作会在下一帧中立即执行。（注意：这里的帧是指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同）
#Vue 提供了 transition 外层包裹容器组件(wrapper component)，可以给下列情形中的任何元素和组件添加进入/离开(enter/leave)过渡
- 条件渲染（使用 v-if）
- 条件展示（使用 v-show）
- 动态组件
- 组件根节点
#过渡类名
-
v-enter：进入式过渡(entering transition)的开始状态。在插入元素之前添加，在插入元素之后一帧移除。
-
v-enter-active：进入式过渡的激活状态。应用于整个进入式过渡时期。在插入元素之前添加，过渡/动画(transition/animation)完成之后移除。此 class 可用于定义进入式过渡的 duration, delay 和 easing 曲线。
-
v-enter-to：仅适用于版本 2.1.8+。进入式过渡的结束状态。在插入元素之后一帧添加（同时，移除 v-enter），在过渡/动画完成之后移除。
-
v-leave：离开式过渡(leaving transition)的开始状态。在触发离开式过渡时立即添加，在一帧之后移除。
-
v-leave-active：离开式过渡的激活状态。应用于整个离开式过渡时期。在触发离开式过渡时立即添加，在过渡/动画(transition/animation)完成之后移除。此 class 可用于定义离开式过渡的 duration, delay 和 easing 曲线。
-
v-leave-to：仅适用于版本 2.1.8+。离开式过渡的结束状态。在触发离开式过渡之后一帧添加（同时，移除 v-leave），在过渡/动画完成之后移除。
单元素过渡
- css过渡
<div id="myDiv">
<button @click="show = !show">点击查看变化</button>
<transition name="fade"> //fade 名字是可以更换的
<div v-if="show">
请看我的变化
</div>
</transition>
</div>
.fade-enter-active,.fade-leave-active {
transition: all 1s linear;
}
.fade-enter,.fade-leave-active {
opacity: 0;
transform:translateX(50px);
}
new Vue({
el:"#myDiv",
data:{
show:true
}
})
- 设置css动画（将上面的css改为如下）
.fade-enter-active{
animation:Ado .5s ease-in;
}
@keyframes Ado{
0%{transform:scale(0.5,0.5);}
60%{transform:scale(1,1);}
80%{transform:scale(1.5,1.5);}
100%{transform:scale(1,1);}
}
.fade-leave-active{
animation:Bdo .5s ease-in;
}
@keyframes Bdo{
0%{transform:scale(1,1);}
60%{transform:scale(1.5,1.5);}
80%{transform:scale(1,1);}
100%{transform:scale(0.5,0.5);}
}
- 自定义过渡类 ：自定义过渡类就不需要 中的name属性了。类名可以是自己随意起，也可引入第三方动画库animate.css, 但是需要在 加入一些添加类名的属性 ，如：
- enter-class=类名
- 在引入第三方动画库 animate.css 时 以上属性要先添加 animated 类， 在添加 动画类名，例如：
enter-class=”animated hinge “
<div id="myDiv">
<button @click="show = !show">点击我</button>
<!-- 这里要加上 animated 才会有效果 (第一个是我自己写的类名，不用加，但是引入animate.css 需要在前面加animate) -->
<transition
leave-active-class="achange"
enter-active-class="animated hinge"
>
<p v-if="show">看我的变化</p>
</transition>
</div>
.achange{
animation:Ado .5s ease-in;
}
@keyframes Ado{
0%{transform:scale(0.5,0.5);}
60%{transform:scale(1,1);}
80%{transform:scale(1.5,1.5);}
100%{transform:scale(1,1);}
}
new Vue({
el:"#myDiv",
data:{
show:true
}
})
