深入理解Vue动画原理

深入讲解 Vue 动画原理

文档 过渡 & 动画

轮播组件slides
轮播难点在于最末位到首位的切换方式，在讲轮播之前需要讲下动画。
Vue动画支持很多种不同的方式。

Vue动画方式1 - CSS transition

Vue提供了transition组件

HTML
//先引入Vue(bootCDN)
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
//1.写`<transition>`
  <transition name="fade"> 
    <p v-if="show">hello</p>
  </transition>
</div>

CSS
//2.写类
.fade-enter-active, .fade-leave-active {
   
  transition: all 2s;
  }
.fade-enter, .fade-leave-to {
   
  opacity: 0;
  width:100px
  }
//3.设置初始值
p{
    
  border:1px solid red;
  width:300px
  }
  
JS
new Vue({
   
  el: '#demo',
  data: {
    show: true }
})

步骤
第1步.在html里写<transition>
第2步.在css里写.fade开头的一系列类
最后给需要的属性添加初始值

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则v-是这些类名的默认前缀。如果你使用了 <transition name="fade">，那么v-enter会替换为fade-enter。

文档 过渡的类名
在进入/离开的过渡中，会有6个class切换:
v-enter-active、v-leave-active表示过渡时间有多长，一般会合并写这2个类，因为动的都是一样的。
v-enter、v-leave-to表示进入和退出状态，这2个类也会合写。剩下2个一般不用。

p经历的过程：
一开始p就是这个类，但是由于目前是隐藏的show: false，所以需要enter进入DOM，进入DOM的过程可以详细的去控制。

v-enter控制进入时的开始的状态，v-enter-to控制进入时的结束的状态，fade-enter-active控制它如何去添加补间动画，一般不需要加v-enter-to因为结束状态应该就是它原本状态p,没必要加。
等动画结束，就会把这3个类v-enter、fade-enter-active、v-enter-to都删掉，恢复到原始状态p

p由于目前是隐藏的所以需要enter进入DOM，进入DOM的过程可以详细的进行控制。开始是红色，然后变成黑色，过程持续3s。动画结束后enter被删掉，恢复到原始的白色。

CSS 过渡

html
<div id="example-1">
  <button @click="show = !show"> Toggle render </button>
  <transition name="slide-fade"> //滑出
    <p v-if="show">hello</p>
  </transition>
</div>

CSS
/* 可以设置不同的进入和离开动画,设置持续时间和动画函数 */
.slide-fade-enter-active {
    
  transition: all 3s ease;//滑出淡入不是线性3s
}
.slide-fade-leave-active {
    
  transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to {
   
//fade-leave-to"淡出的结束状态"就是"淡入开始的状态"，fade-enter对应fade-leave-to
  transform: translateX(10px);//淡入那一瞬间的位置
  opacity: 0;
}

JS
new Vue({
   
    el: '#example-1',
    data: {
    show: true }
})

Vue动画方式2 - CSS animation

html
<div id="example-2">
  <button @click="show = !show">Toggle show</button>