vue 2.x開(kāi)始技羔，動(dòng)畫(huà)效果的實(shí)現(xiàn)都已經(jīng)抽象成一個(gè)內(nèi)建的組件了蜈漓，transition

<!-- 簡(jiǎn)單元素 -->
<transition>
  <div v-if="ok">toggled content</div>
</transition>
<!-- 動(dòng)態(tài)組件 -->
<transition name="fade" mode="out-in" appear>
  <component :is="view"></component>
</transition>
<!-- 事件鉤子 -->
<div id="transition-demo">
  <transition @after-enter="transitionComplete">
    <div v-show="ok">toggled content</div>
  </transition>
</div>

1. transition標(biāo)簽屬性設(shè)置需要的動(dòng)畫(huà)類型

<transition name="move">
      <div class="cart-decrease" v-show="food.count>0" @click="decreaseCart($event)">
        <span class="inner icon-remove_circle_outline"></span>
      </div>
</transition>

2. 給需要設(shè)置成動(dòng)畫(huà)的元素設(shè)計(jì)樣式

    .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.實(shí)現(xiàn)添加購(gòu)物車(chē)時(shí)，小球拋物線進(jìn)購(gòu)物車(chē)的示例

<div class="cart-add icon-add_circle" @click="addCart($event)"></div>

添加購(gòu)物車(chē)的小球娩怎，單擊事件的時(shí)候，在處理函數(shù)中加入this.$emit('cartadd', event.target),該方法能將當(dāng)前元素節(jié)點(diǎn)作為參數(shù)傳給父組件，其中方法的第一個(gè)參數(shù)為事件名斥扛，父組件的監(jiān)聽(tīng)器會(huì)監(jiān)聽(tīng)該事件。

<cartcontrol :food="food" @cartadd="_drop"></cartcontrol>

父組件監(jiān)聽(tīng)到cartadd事件后丹锹，會(huì)調(diào)用方法對(duì)象里面的_drop函數(shù)

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

_drop函數(shù)會(huì)執(zhí)行注冊(cè)的引用信息名ref為shopCart的子組件的drop方法
shopCart子組件中的methods對(duì)象中稀颁，實(shí)現(xiàn)了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
          }
        }
      }

該方法會(huì)把小球的show屬性由false改為true芬失，元素屬性綁定為由$emit實(shí)例方法傳出來(lái)得event.target元素。在該實(shí)例中就是添加按鈕匾灶，即將成為小球的元素棱烂。
shopCart子組件中實(shí)現(xiàn)的動(dòng)畫(huà)樣式

    <div class="ball-container">
      <div v-for="ball in balls">
        <transition name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
          <div v-show="ball.show" class="ball">
            <div class="inner inner-hook"></div>
          </div>
        </transition>
      </div>
    </div>

transition組件監(jiān)聽(tīng)器監(jiān)聽(tīng)的事件有before-enter、enter阶女、after-enter事件颊糜。事件方法需要自己實(shí)現(xiàn)
（shopCart子組件的methods對(duì)象中實(shí)現(xiàn)以下方法）

    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子組件中實(shí)現(xiàn)data屬性方法

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

該方法提供了我們要操作的小球數(shù)組，還有拋出的小球數(shù)組秃踩。