Vue 2.0音乐app项目中使用
需求：使mini播放器被点击时，其img放大到normal播放器的的img位置

// 安装
npm install create-keyframe-animation --save

项目代码：

import animations from 'create-keyframe-animation'

// create-keyframe-animation 使用 开始
    enter(el, done) {
      const {x, y, scale} = this._getPosAndScale()// 获取变化数值

      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'// 动画曲线
        }
      })
      // 绑定动画元素，done--到下一步afterEnter
      animations.runAnimation(this.$refs.cdWrapper, 'move', done)
    },
    afterEnter() {
      animations.unregisterAnimation('move')
      this.$refs.cdWrapper.style.animation = ''
    },
    // 该动画后部分（注释）功能会影响singer-detail的回退
    // 使用enter和afterEnter的方法则可行
    leave(el, done) {
      const {x, y, scale} = this._getPosAndScale()

      let animation = {
        0: {
          transform: `translate3d(0,0,0) scale(1)`
        },
        60: {
          transform: `translate3d(0,0,0) scale(1.1)`
        },
        100: {
          transform: `translate3d(${x}px,${y}px,0) scale(${scale})`
        }
      }

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

      animations.runAnimation(this.$refs.cdWrapper, 'out', done)
      // this.$refs.cdWrapper.style.transition = 'all 0.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)
    },
    afterLeave() {
      animations.unregisterAnimation('out')
      this.$refs.cdWrapper.style.animation = ''
      // this.$refs.cdWrapper.style.transition = ''
      // this.$refs.cdWrapper.style[transform] = ''
    },
    // create-keyframe-animation 使用 结束