Vue transtion动画常用效果

主要用于v-if，v-show和router-view的进出场动画。

<transition name="name" >
      <div v-show="show" ></div>
      <div v-if="show" ></div>
      <router-view/>
</transition>
// 定义进入前与离开后状态
.name-enter, .name-leave-to {
      ...
}
// 定义离开前与进入后状态
.name-leave, .name-enter-to {
      ...
}
 // 定义进出过程
.name-enter-active, .name-leave-active {
      transition: all .5s
}

fade淡化进出：

.fade-enter, .fade-leave-to {
      opacity: 0
}
.fade-leave, .fade-enter-to {
      opacity: 1
}
.fade-enter-active, .fade-leave-active {
      transition: all .2s
}

scale缩放进出：

.scale-enter, .scale-leave-to {
      transform: scale(0)
}
.scale-leave, .scale-enter-to {
      transform: scale(1)
}
.scale-enter-active, .scale-leave-active {
      transition: all .2s
}

left左侧进出：通常用于左侧边栏

.left-enter, .left-leave-to {
      transform: translate3d(-100%, 0, 0)
}
.left-leave, .left-enter-to {
      transform: translate3d(0, 0, 0)
}
.left-enter-active, .left-leave-active {
      transition: all .2s
}

right左侧进出：通常用于右侧边栏

.right-enter, .right-leave-to {
      transform: translate3d(100%,0, 0)
}
.right-leave, .right-enter-to {
      transform: translate3d(0, 0, 0)
}
.right-enter-active, .right-leave-active {
      transition: all .2s
}

top顶部进出：通常用于提示弹窗

.top-enter, .top-leave-to {
      transform: translate3d(0,-100%, 0)
}
.top-leave, .top-enter-to {
      transform: translate3d(0, 0, 0)
}
.top-enter-active, .top-leave-active {
      transition: all .2s
}