5.6 Vue transition功能扩展（子div可附加动画）+ JS构造CSS3-Animation动画

1、 监听路由变化

  watch: {
    '$route' () {
      // 此处写router变化时，想要初始化或者是执行的方法......
    }
  }

2、 语义化数据对象
通常建立 common/js/config.js

export const playMode = {
  sequence: 0,
  loop: 1,
  random: 2
}

3、 ::before伪元素。写法&::before（子集） 和同级class写法&.active（同级） ，相似。
但是却表示子集，而不是同级

4、vue @click事件，既获取vue对象，又获取index.

5、设置了position:absolute 那么继承的CSS则根据附属元素来。而不是上一个父层

6、vue transition标签，可以按需对子div进行动画定义

父集transition-duration 必须大于子transition-duration

7、JS编程方式构造CSS动画(create-keyframe-animation)

由github提供的库 create-keyframe-animation进行实现。
步骤如下
1、需求分析。计算坐标偏移量 X, Y。

经计算 X： -147.5px Y： 407px
2、绑定transition的@enter@afterEnter@leave@afterLeave动画钩子

  <transition name="normal"
                @enter="enter"
                @afterEnter="afterEnter"
                @leave="leave"
                @afterLeave="afterLeave">

3、封装计算偏移量方法_getPosAndScale() {}

    _getPosAndScale () {
      const paddingLeft = 40
      const paddingBottom = 30
      const paddingTop = 80
      const targetWidth = 40
      const width = window.innerWidth * 0.8
      const scale = targetWidth / width // 初始缩放比例
      const x = -(window.innerWidth / 2 - paddingLeft)
      const y = window.innerHeight - width / 2 - paddingTop - paddingBottom
      return {
        x,
        y,
        scale
      }
    }

4、 在transition钩子函数中执行代码（贴一个@enter@enterAfter）

enter (el, done) {
      const {x, y, scale} = this._getPosAndScale()
      console.log(x, y)
      let animation = {
        0: {
          transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`
        },
        60: {
          transform: `translate3d(0, 0, 0) scale(1.1)`
        },
        100: {
          transform: `translate3d(0, 0, 0) scale(1)`
        }
      }

      animations.registerAnimation({
        name: 'move',
        animation,
        presets: {
          duration: 400,
          easing: 'linear'
        }
      })

      animations.runAnimation(this.$refs.cdWrapper, 'move', done)
    },
    afterEnter () {
      // 清空animation
      animations.unregisterAnimation('move')
      this.$refs.cdWrapper.style.animation = ''
    }

5、效果如下

后边还有leave钩子和leaveAfter钩子，动画较简单，故直接绑定 transition动画即可。

leave (el, done) {
      this.$refs.cdWrapper.style.transition = 'all .4s'
      const {x, y, scale} = this._getPosAndScale()
      this.$refs.cdWrapper.style[transform] = `translate3d(${x}px, ${y}px, 0) scale(${scale})`
      this.$refs.cdWrapper.addEventListener('transitionend', done) // 必须增加监听并done，不然动画一直处于执行状态，无法进行任何操作。
    },
    afterLeave (el, done) {
      this.$refs.cdWrapper.style.transform = ''
      this.$refs.cdWrapper.style.transition = ''
    },