VUE过渡动画过程详解分析(上)
样式
vue过渡效果的实现需要写好一定名称的样式
- v-enter 元素进入之前的样式类
- v-enter-active元素过渡过程中的过渡效果
- v-enter-to元素过渡动画终点的样式(如果设置过渡动画结束后会把它和v-enter-active直接删除,因为这时过渡效果active被删除,所以删除它这个类的过程中不会有过渡动画产生,比如它有一个属性opaicty:0.4,在过渡结束后直接从opacity:0.4到1(也就是初始状态))
- v-leave 元素离开之前的样式类,v-leave-active 元素离开之前的样式类,v-leave-to元素过渡动画结束后的样式类
.v-enter ,
.v-leave-to{/* 因为元素开始进入前和离开后的位置都为80px这个位置,所以可以这么写 */
transform:translateX(80px);
}
(.v-enter-to ,
.v-leave{/*按需求决定是否加这个,一般不常用到*/
transform:translateX(40px);
})
.v-enter-active ,
.v-leave-active{
transition: transform 0.5s;
}
也可以做动画,引用官方的实例
.v-enter-active {/* 在元素动画开始前一帧引入v-enter-active类,使元素开始动画 */
animation: bounce-in .5s;
}
.v-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
<transsition><!-- 如果设置name属性,则样式的前缀可以自定义,
比如name="a"那么v-enter等要变成a-enter
如果有:duration="{ enter: 500, leave: 800 }"属性,可以设置动画及过渡效果的固定时长,
到达这个1000毫秒后就会强制隐藏或者移除元素-->
<div v-if="isShow">
asdasdasdasdasdasdasd
</div>
</transsition>
<input type="button" @click="isShow=!isShow" value="开始">
data:isShow: false
开始进入动画
- 点击开始按钮,开始,在元素进入之前添加(class)v-enter(transform: translateX(80px))和(class)v-enter-active类设置元素过渡效果以及初始位置
- ((class)v-enter)在元素被渲染入页面之后马上删除(换为v-enter-to transform: translateX(40px) 或者直接到无class),但((class)v-enter-active)不被删除
- 让元素从v-enter类过渡到无也就是初始位置(或者过渡到v-enter-to (transform: translateX(40px)))。这段时间会有过渡动画产生
- 以上过渡动画完成后拿走过渡的类v-enter-active
- 如果有v-enter-to (transform: translateX(40px)这个css样式的设置,再在过渡动画结束后拿走v-enter-to (transform: translateX(40px)),因为没有了v-active过渡类设置过渡属性,所以元素删掉v-enter-to (transform: translateX(40)类后不会有过渡动画产生,直接从40px处直接变为没有类的初始位置(0px)
v-enter ---------v-enter-active-------------无
或
v-enter----------v-enter-active-------------v-enter-to(直接到)无
开始离开动画
- 点击,在元素离开之前添加(class)v-leave(transform: translateX(40px))和(class)v-leave-active类设置元素过渡效果以及初始位置,如果没有设置(class)v-leave(transform: translateX(40px))则初始化位置为0,也就是原位,如设置则直接从0px的位置到40px,其间无过渡动画。
- 如果有类(class)v-leave(transform: translateX(40px)),将其替换为v-leave-to(transform: translateX(80px)),如果没有,直接添加 v-leave-to(transform: translateX(80px))但((class)v-leave-active)不被删除
- 让元素从v-leave(transform: translateX(40px))类过渡到v-leave-to(transform: translateX(80px)),或者从无(0px)也就是初始位置过渡到v-leave-to(transform: translateX(80px))。这段时间会有过渡动画产生
- 以上过渡动画完成后移除元素
v-leave----------v-leave-active-------------v-leave-to(直接到)无
或
v-leave----------v-leave-active-------------无
动画钩子函数的使用
<!-- 各种钩子函数的使用 -->
<input type="button" @click="bShow = !bShow" />
<transition
@before-enter="beforeEnter"
@enter="enter"
>
<div v-show="bShow">按时大苏打实打实</div>
</transition>
beforeEnter (el) {//el表示做过渡效果的那个dom元素
el.style.transform = 'translate(0, 0)'//元素显示前
},
enter (el) {//开始的前一帧设置样式和过渡效果进行过渡动画
//刷新动画(必须)
el.offsetWidth
el.style.transform = 'translate(450px, 450px)'
el.style.transition = 'all 1s'
//如果放el.style.display='none'的话会在开始就设置隐藏,也就是看不见元素
//vue的v-if和v-show会在元素过渡效果完成后再执行隐藏或移除
this.bShow = false
}
过程:1、开始之前botton的click事件使元素显示,beforeEnter钩子函数在显示之前设置初始位置为 0 ,0;
2、显示后设置结束后的添加元素的过渡以及过渡后的位置的样式,浏览器监听到class变化开始进行过渡动画
3、v-if和v-show会在过渡动画结束后再执行
4、afterEnter没啥用,不会自己执行,都是在enter函数里传入一个其引用(done())同步执行,
如果不考虑代码的可读性,可以把所有内容写到enter里面
//leave操作和这个类似