vue-transition 动画效果(fade, top, bottom, left, right)


<template>
  <div>
    <transition name='fade'>
        <div v-if='goodSkuFlag' class='sku-shadow'></div>                 
    </transition>
    <transition name='bottom'>
      <div class='sku-list' v-if='goodSkuFlag'>
         // code here
      </div>
    </transition>
  </div>
</template>
.fade-enter-active, .fade-leave-active
  transition all .33s
.fade-enter, .fade-leave-to
  opacity 0

.left-enter-active, .left-leave-active
  transition all .33s
.left-enter, .left-leave-to
  opacity 0
  transform translateX(-100%)

.right-enter-active, .right-leave-active
  transition all .33s
.right-enter, .right-leave-to
  opacity 0
  transform translateX(100%)

.top-enter-active, .top-leave-active
  transition all .33s
.top-enter, .top-leave-to
  opacity 0
  transform translateY(-100%)

.bottom-enter-active, .bottom-leave-active
  transition all .33s
.bottom-enter, .bottom-leave-to
  opacity 0
  transform translateY(100%)

声明:Jensonhui's blog|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - vue-transition 动画效果(fade, top, bottom, left, right)


Just do it.