VUE过渡动画过程详解分析（上）

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

开始进入动画

1. 点击开始按钮，开始，在元素进入之前添加（class）v-enter（transform: translateX(80px)）和（class）v-enter-active类设置元素过渡效果以及初始位置
2. (（class）v-enter)在元素被渲染入页面之后马上删除（换为v-enter-to transform: translateX(40px) 或者直接到无class）,但(（class）v-enter-active)不被删除
3. 让元素从v-enter类过渡到无也就是初始位置(或者过渡到v-enter-to （transform: translateX(40px)）)。这段时间会有过渡动画产生
4. 以上过渡动画完成后拿走过渡的类v-enter-active
5. 如果有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（直接到）无

开始离开动画

1. 点击，在元素离开之前添加（class）v-leave（transform: translateX(40px)）和（class）v-leave-active类设置元素过渡效果以及初始位置,如果没有设置（class）v-leave（transform: translateX(40px)）则初始化位置为0，也就是原位，如设置则直接从0px的位置到40px，其间无过渡动画。
2. 如果有类（class）v-leave（transform: translateX(40px)），将其替换为v-leave-to（transform: translateX(80px)），如果没有，直接添加 v-leave-to（transform: translateX(80px)）但(（class）v-leave-active)不被删除
3. 让元素从v-leave（transform: translateX(40px)）类过渡到v-leave-to（transform: translateX(80px)），或者从无(0px)也就是初始位置过渡到v-leave-to（transform: translateX(80px)）。这段时间会有过渡动画产生
4. 以上过渡动画完成后移除元素

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操作和这个类似