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><!--记得用animated启动动画-->
        </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 标签