学习笔记（12）vue动画

1，vue过渡动画

transition标签可以为条件渲染的标签执行切换时添加动画。 transition标签必须配合6个class使用，用于指定动画的方式。

如果页面中多个trnasition标签要执行不同的动画方式，那么需要为这些transition标签设置不同的name属性。

/*Html部分*/
<transition name='titleOne'>
<div v-show="flag" id="box"></div>
</transition>

//css部分
/* 离场动画开始时(开始的瞬间)元素的样式 */
.v-leave{
opacity: 1;
}

/* 离场动画过程中元素的样式 */
.v-leave-active{
transition: all 2s;
position: absolute;
}

/* 离场动画结束时元素的样式 */
.v-leave-to{
opacity: 0;
}

/* 入场动画开始时的样式 */
.v-enter{
opacity: 0;
}

/* 入场动画过程中的样式 */
.v-enter-active{
transition: opacity 2s;
position: absolute;
}

/* 入场动画结束时元素的样式 */
.v-enter-to{
opacity: 1;
}

transition标签中只能包含一个子元素，如果是多个子元素需要使用transition-group标签，transition-group标签的子元素必须包含key属性。

<transition-group>
	<div key="1" v-show="flag" class="item">11111</div>
	<div key="2" v-show="!flag" class="item2">22222</div>
</transition-group>

2，vue关键帧动画

ransition标签也可以使用关键帧动画。

leave-active-class设置：离场的关键帧动画的class，
enter-active-class：入场关键帧动画。

<transition
	leave-active-class="shakeout"
	enter-active-class="eject"
>
	<div id="box" v-show="flag"></div>
</transition>

transition可以使用第三方提供的关键帧动画。

3，js动画

transition标签还可以使用js动画，需要绑定leave和enter事件，在leave事件函数中执行离场动画，在enter事件函数中执行入场动画。

<transition
	@leave="boxLeave"
	@enter="boxEnter"
>
	<div id="box" v-show="flag"></div>
</transition>

动画事件函数中会传递两个参数:
1参：要做动画的元素，
2参：动画结束时需要调用的回调函数。

boxLeave(el,cb){});