vue2.0 transition過渡

組件過渡過程中，會有四個CSS類名進行切換，這四個類名與上面transition的name屬性有關，比如name="fade"，會有如下四個CSS類名：

1.fade-enter：進入過渡的開始狀態，元素被插入時生效，只應用一幀後立即刪除；

2.fade-enter-active：進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成之後移除；

3.fade-leave：離開過渡的開始狀態，元素被刪除時觸發，只應用一幀後立即刪除；

4.fade-leave-active：離開過渡的結束狀態，元素被刪除時生效，離開過渡完成之後被刪除；

從上面四個類名可以看出，fade-enter-active和fade-leave-active在整個進入或離開過程中都有效，所以CSS的transition屬性在這兩個類下進行設置。 上面示例中，fade-enter和fade-leave-active類設置CSS爲opacity:0，說明過渡剛進入和離開的時候透明度爲0，即不顯示。

html

<transition name="fade">
    <div v-show="detailShow" class="detail">
        XXXXXXXXXXX
    </div>    
</transition>

css

.detail
      position: fixed
      z-index: 100
      top: 0
      left: 0
      width: 100%
      height: 100%
      overflow: auto
      opacity: 1
      background: rgba(7, 17, 27, .8)
      &.fade-enter-active, &.fade-leave-active
        transition: all 0.5s
      &.fade-enter, &.fade-leave-active
        opacity: 0
        background: rgba(7, 17, 27, 0)

多重過渡效果（先平移後旋轉） html

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

css

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