vue 2.x实现动画效果

vue 2.x开始，动画效果的实现都已经抽象成一个内建的组件了，transition

  
toggled content



  



  
    
toggled content
  

1. transition标签属性设置需要的动画类型

2. 给需要设置成动画的元素设计样式

    .cart-decrease
      display: inline-block
      padding: 6px
      transition: all 0.4s linear
      .inner
        display: inline-block
        font-size: 24px
        line-height: 24px
        color: rgb(0, 160, 220)
        transition: all 0.4s linear
        transform: rotate(0)
      &.move-enter-active
        opacity: 1
        transform: translate3d(0, 0, 0)
      &.move-enter, &.move-leave
        opacity: 0
        transform: translate3d(24px, 0, 0)
        .inner
          transform: rotate(180deg)

3.实现添加购物车时，小球抛物线进购物车的示例

添加购物车的小球，单击事件的时候，在处理函数中加入this.$emit('cartadd', event.target),该方法能将当前元素节点作为参数传给父组件，其中方法的第一个参数为事件名，父组件的监听器会监听该事件。

父组件监听到cartadd事件后，会调用方法对象里面的_drop函数

methods: {
...
,
_drop (target) {
        this.$nextTick(() => {
          this.$refs.shopCart.drop(target)
        })
      },
...
}

_drop函数会执行注册的引用信息名ref为shopCart的子组件的drop方法
shopCart子组件中的methods对象中，实现了drop方法

    drop (el) {
        for (let i = 0; i < this.balls.length; i++) {
          let ball = this.balls[i]
          if (!ball.show) {
            ball.show = true
            ball.el = el
            this.dropBalls.push(ball)
            return true
          }
        }
      }

该方法会把小球的show属性由false改为true，元素属性绑定为由$emit实例方法传出来得event.target元素。在该实例中就是添加按钮，即将成为小球的元素。
shopCart子组件中实现的动画样式

transition组件监听器监听的事件有before-enter、enter、after-enter事件。事件方法需要自己实现
（shopCart子组件的methods对象中实现以下方法）

    beforeEnter (el) {
        let count = this.balls.length
        while (count--) {
          let ball = this.balls[count]
          if (ball.show) {
            let rect = ball.el.getBoundingClientRect()
            let x = rect.left - 32
            let y = -(window.innerHeight - rect.top - 22)
    //            console.log(x, y)
            el.style.display = ''
            el.style.webkitTransform = `translate3d(0, ${y}px, 0)`
            el.style.transform = `translate3d(0, ${y}px, 0)`
            let inner = el.getElementsByClassName('inner-hook')[0]
            inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`
            inner.style.transform = `translate3d(${x}px, 0, 0)`
          }
        }
      },
      enter (el) {
        /* eslint-disable no-unused-vars */
        let rf = el.offsetHeight
        this.$nextTick(() => {
          el.style.webkitTransform = 'translate3d(0, 0, 0)'
          el.style.transform = 'translate3d(0, 0, 0)'
          let inner = el.getElementsByClassName('inner-hook')[0]
          inner.style.webkitTransform = 'translate3d(0, 0, 0)'
          inner.style.transform = 'translate3d(0, 0, 0)'
        })
      },
      afterEnter (el) {
        let ball = this.dropBalls.shift()
        if (ball) {
          ball.show = false
          el.style.display = 'none'
        }
      }

注意别忘了在shopCart子组件中实现data属性方法

    data () {
      return {
        balls: [
          {
            show: false
          }, {
            show: false
          }, {
            show: false
          }, {
            show: false
          }, {
            show: false
          }],
        dropBalls: []
      }
    },

该方法提供了我们要操作的小球数组，还有抛出的小球数组。