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
     80px
    height: 25px
    border: 1px solid blue
    position: relative
    .greenSquare
      display: inline-block
       25px
      height: 25px
      background: green
    .redSquare
      display: inline-block
      position: absolute
      right: 0
      transform: translate3d(0, 0, 0)
      opacity: 1
      .inner
        display: inline-block
         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>