vue2.0的transition過渡效果

 很長時間沒寫隨筆了，原因是發現了github上很多有趣的項目，希望能通過學習別人的代碼來讓自己進步。其實最近學習了一些新的框架和插件，比如說Vue。也在筆記本上記錄了很多想在隨筆上進一步討論的問題。昨天在使用vue寫過渡效果的時候，比較笨，花了很長時間，希望能在隨筆中記錄下自己的學習和分析的過程。

首先我們需要弄明白vue2.0中過渡效果該如何使用：

1、我們可以給下列情況的元素和組件添加過渡效果（v-if、v-show、動態組件、組件根節點），用<transition name="xxx"></transition>包裹這些元素和組件，我們這個demo用v-show來舉例說明。我們可以理解為通過v-show控制組件顯示和隱藏的過程中對組件添加過渡效果。

2、了解過渡的CSS類名，①v-enter-active、②v-enter、③v-enter-to、④v-leave-active、⑤v-leave、⑥v-leave-to。①可以理解為組件顯示的整個過程，②是組件顯示的起始狀態，③是組件最后展現的狀態，④是組件隱藏的整個過程，⑤是組件隱藏的起始狀態，⑥是組件隱藏后的最終狀態，一般來說⑥和②展現的效果一致。因為我們之前使用<transition name="xxx"></transition>包裹組件，所以在css中需要使用xxx-enter-active、xxx-leave-active等。

需求：通過點擊綠色方塊，讓紅色方塊動態出現（包括透明度opacity、平移translate、以及旋轉rotate效果），先上demo，然后分析：

<template>
    <div class="app">
        <transition name="move">
            <div class="redSquare" v-show="isShow">
                <span class="inner"></span>
            </div>
        </transition>
        <div class="greenSquare" @click="change"></div>
    </div>
</template>

<script>
export default {
    data () {
      return {
        isShow: false
      }
    },
    methods: {
      change: function() {
        this.isShow = !this.isShow
      }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .app
    width: 80px
    height: 25px
    border: 1px solid blue
    position: relative
    .greenSquare
      display: inline-block
      width: 25px
      height: 25px
      background: green
    .redSquare
      display: inline-block
      position: absolute
      right: 0
      transform: translate3d(0, 0, 0)
      opacity: 1
      .inner
        display: inline-block
        width: 25px
        height: 25px
        background: red
        transition: all 0.7s // 定義旋轉的過渡效果
        transform: rotate(0)
/**以上是redsquare元素隱藏時的CSS，下面是redSquare展現時的過渡效果**/
      &.move-enter-active, &.move-leave-active
        transition: all 0.7s // 定義平移的過渡效果
      &.move-enter, &.move-leave-to
        transform: translate3d(-20px, 0, 0)
        opacity: 0
        .inner
          transform: rotate(180deg)
</style>