## 过渡动画
> 可以使用CSS和JavaScript两种方式实现过度动画
### CSS方式
* 设置渐变的元素需要使用`<transition>`标签进行包裹,并且给该标签取一个名字。
~~~html
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<img v-show="show" src="./assets/yue.jpg"/>
</transition>
~~~
~~~css
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
~~~
这样就实现了一个渐变的效果了。
> 再尝试一个例子，让元素从上边下来，然后往下边出去。
~~~html
<transition name="fade">
<img v-show="show" src="./assets/yue.jpg"/>
</transition>
~~~
~~~css
.my-trans-enter-active, .my-trans-leave-active {
transition: all .5s ease-in-out;
}
.my-trans-enter{
transform: translateY(-500px);
opacity: 0;
}
.my-trans-leave-active{
transform: translateY(500px);
opacity: 0;
}
~~~
> 再尝试一下组件的过渡变化
* 使用p标签挂载动态组件
~~~html
<transition name="my-trans">
<!--<img v-show="show" src="./assets/yue.jpg"/>-->
<p :is="toggleCom"></p>
</transition>
~~~
* 导入两个组件
~~~
import acom from './components/a'
import bcom from './components/b'
~~~
* 按钮的点击切换事件
~~~javascript
components: {
acom,
bcom
},
data(){
return {
toggleCom:"acom"
}
},
methods:{
toggle(){
if(this.toggleCom === "acom"){
this.toggleCom = "bcom"
}else{
this.toggleCom = "acom"
}
}
}
}
~~~
**过渡模式**
> 同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式
* in-out：新元素先进行过渡，完成之后当前元素过渡离开。
* out-in：当前元素先进行过渡，完成之后新元素过渡进入。
* 用 out-in 重写之前的开关按钮过渡：
~~~html
<transition name="fade" mode="out-in">
<!-- ... the buttons ... -->
</transition>
~~~
### JS方式
> 可以在属性中声明 JavaScript 钩子
~~~html
<transition
v-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>
~~~
~~~javascript
// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
~~~
这些钩子函数可以结合 CSS `transitions/animations` 使用，也可以单独使用。
当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。否则，它们会被同步调用，过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 `v-bind:css="false"`，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
> 我们做个效果尝试一下
~~~html
<button v-on:click="show = !show">
Toggle
</button>
<transition @before-enter = "beforeEnter"
@enter="enter"
@leave = "leave"
:css="false">
<img src="./assets/yue2.jpg" class="animate-p" v-show="show"></img>
</transition>
~~~
~~~javascript
beforeEnter:function(el){
el.style.opacity = 0;
el.style.left = '-500px';
},
enter:function(el,done){
Velocity(el,{
left:0,
opacity:1
},{
duration:1500,
complete:done
});
},
leave:function(el,done){
Velocity(el,{
left:'500px',
opacity:0
},{
duration:1500,
complete:done
})
}
~~~
~~~css
.animate-p{
position: absolute;
top: 0;
left: 0;
}
~~~
