Vue动画

概述：Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
常用：
- 在css过渡和动画中自动应用class
- 在过渡钩子函数中使用JavaScript直接操作DOM
- 配合使用第三方CSS动画库，如Animate.css
过渡的类名：
- 总结
- v-enter：动画生效前（不起name属性，默认是v-开头）
- v-enter-to：动画生效后
- v-enter-active：动画生效期间，常用来挂transition:all 0.8s easy;【入场动画的时间段】
- v-leave：动画结束前
- v-leave-to：动画结束后
- v-leave-active：动画结束期间【离场动画的时间段】
- 使用：
  - 应用类
    - 单组件transition，<transition name="fade"></transition>，相关的6个类名要用fade-前缀
    - .v-enter，.v-leave-to{} //描述进场和离场状态
    - .v-enter-active，.v-leave-active{} //入场和离场的动画时间段
  - 应用第三方css动画库，如Animate.css
    - <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200"> <h3 v-if="flag" class="animated">这是一个H3</h3> </transition>
  - JS钩子
    - 注意：
      - 动画钩子函数的第一个参数：el，表示要执行动画的那个DOM元素，是个原生的 JS
      - el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
    - <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }" > <h3 v-if="flag" class="animated">这是一个H3</h3> </transition>
    - beforeEnter(el){ // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以在 beforeEnter 中，设置元素开始动画之前的起始样式 // 设置小球开始动画之前的，起始位置 el.style.transform = "translate(0, 0)" }
    - enter(el, done){ // 这句话，没有实际的作用，但是，如果不写，出不来动画效果； // 可以认为 el.offsetWidth 会强制动画刷新 el.offsetWidth // enter 表示动画开始之后的样式，这里，可以设置小球完成动画之后的，结束状态el.style.transform = "translate(150px, 450px)" el.style.transition = 'all 1s ease' // 这里的 done，起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用 done()}
    - afterEnter(el){ // 动画完成之后，会调用 afterEnter // console.log('ok') this.flag = !this.flag}
  - 列表动画
    - <transition-group appeartag="ul">
    - 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup
    - 如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性
    - 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果
    - 通过为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签