0-11 Vue 动画原理（transition过渡、animation、velocity、多元素动画）

1.轮播组件 slides

• 淘宝首页的广告位：轮播
• 轮播最难的点：最后一个到第一变化
  

Vue动画方式1 - CSS transition

• 官方文档
• CSS过渡

1.做一个简单的动画需要哪几布

1. 给元素外添加一个transition标签
   <transition name="fade">标签元素</transition>
2. 在CSS里面写一个以fade开头的一系列的类
   .fade-enter-active
3. 需要给变化元素初始值
   （有些属性有默认值就不需要初始值）
4. 添加一个事件监听，变化元素的属性
   指令的过程被transition延长了

2.过渡的类名

• 元素诞生或元素消亡都有一个过程，而我们通过transition可以控制这个过渡过程
• .fade-enter{}：淡入的第一帧，也就是初始值
• .fade-enter-active{}：正在进入，这个就定义了transition有多少秒
• .fade-leave-active{}：淡出的过程

.fade-enter-active,.fade-leave-active {
  /* 持续时间*/
  transition: all .5s;
}

• .fade-enter-to{}：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
  一般是不需要这个，因为动画的结束状态就是该元素p对应的状态

3.过渡原理

• p元素一开始没有出现在DOM中
• 首先将它插到DOM中，变成一个实际存在的元素
• 然后添加一个 .fade-enter、.fade-enter-active类在p身上
• 紧接着第二帧 .fade-enter就被移除，然后再添加一个 .fade-enter-to
• 一直到结束： .fade-enter-to和.fade-enter-active都被移除
• p元素结束时状态为p在CSS中的值

Vue动画方式2- CSS animation

• CSS动画
• 区别
  在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

1.动画

• 还是用transition标签
• 直接给淡入过程添加一个动画
  淡入的开始和结束状态都不写，只写怎么过渡
  淡出的动画不用写，只需要reverse即可
• 在100%的时候最好是回到初始状态
  不然会出现一个卡壳的状态，动画不连贯

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

• 使用animation更简单，但要做到两件事
  1.一定要写：enter-active/leave-active正在淡入和正在淡出的animation
  2.animation要保证最终状态就是正常状态
• 可以结合一些第三方库
  因为animation很难写，很那把动画做得很好看，可以直接使用别人的动画
  在BootCDN中搜索animate.css
  复制标签到head中
  
• transition标签
  1.其中的enter-active-class和leave-active-class后面的内容可以修改
  2.如：enter-active-class="animated shake"
  3.Animate.css动画文档

  <transition
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>

Vue动画方式3 - JS 操作动画

• 可以使用JS钩子来判断当前动画处于哪个阶段
• velocityBootCDN文档
  一个非常著名的用JS做动画的库
• JS可以精确控制动画的状态

1.操作

• 使用velocity对元素进行一系列的操作
  操作都放在new Vue的methods里面，结束的时候要调用done
• 是由自己完全控制的过程
  1.beforeEnter、enter、leave
  2.传入参数：el（操作元素）、done（结束的时候）

  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }

Vue动画方式4 - 多元素动画

1.多个元素过渡

• 多个元素在transition标签中
• 对于原生标签可以使用 v-if/v-else 来进行status的切换
  status的初始值在data中可以设定
• 当有相同标签名的元素切换时，需要通过 key 设置唯一的值来标记以让 Vue 区分它们
  否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

<transition name="fade">
  <button key="on" v-if="status === 'off'"
          @click="status = 'on'">on</button>
  <button key="off" v-else 
          @click="status='off'">off</button>
</transition>

2.过渡模式

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。
  不常用
• out-in：当前元素先进行过渡，完成之后新元素过渡进入。
  会把动画按照顺序依次执行，而不是同时执行
  同时执行：第一个元素消失时还占着位置，导致第二个元素出现时只能在旁边进行动画

<transition name="fade" mode="out-in">
  <!-- ... the buttons ... -->
</transition>

• 轮播
  绝对定位和相对定位：当第二个元素先进来，第一个元素才消失的动画时，保证第二个元素能够直接到达固定位置，而不是被第一个元素挤到第二个位置去

.fade-enter{
  opacity:0;
  transform: translateX(-100px)
}
.fade-leave-to{
  opacity:0;
  transform: translateX(100px)
}

#example-4{
  position: relative;
  padding: 100px;
}
button{
  position: absolute;
}

3.多个组件的过渡

• 多个组件的过渡简单很多 - 不需要使用 key
  因为组件不同，所以不需要key
• 只需要使用动态组件
• 如果有多个组件，想要在一个地方显示，切换的时候有动画
  1.在transition中使用component标签
  2.view是变量，data中view等于第几个组件的名字，它就先是哪个组件
  <component v-bind:is="view"></component>

总结

• transition过渡
  原理：一开始给元素加一个类，过一帧再给一个类，中间创建补间动画
• animation动画
  原理：和上面原理差不多，不过是用animation来告诉中间应该怎么动，动完恢复原样
• 钩子+velocity1.js
  原理：这样中间怎么动都可以控制，完成后调用done（告诉vue动完了，可以进入下一个状态）
• 多个元素切换
  1.元素类型相同要加key区分
  2.控制元素先出后进还是先进后出：mode=out-in/in-out
• 多个组件切换
  <component :is='xxx'>放到transition中，其中xxx=v-a / v-b / v-c 等组件
• 列表动画