Transition 过渡动画

借助vue的过渡状态实现的过渡动画，由v-show控制动画执行

示例

fade淡入淡出

fade

代码

<vu-button @click="show = !show">click</vu-button><br>
<transition name="fade">
    <div v-show="show" class="div">fade</div>
</transition>

<script>
export default {
  data(){
    return {
      show: true
    }
  }
}
</script>

rotate旋转

rotate

rotate-top

rotate-bottom

rotate-left

rotate-right

rotate-x

rotate-y

代码

<vu-button @click="show = !show">click</vu-button><br>
<transition name="rotate">
    <div v-show="show" class="div">rotate</div>
</transition>
<transition name="rotate-top">
    <div v-show="show" class="div">rotate-top</div>
</transition>
<transition name="rotate-bottom">
    <div v-show="show" class="div">rotate-bottom</div>
</transition>
<transition name="rotate-left">
    <div v-show="show" class="div">rotate-left</div>
</transition>
<transition name="rotate-right">
    <div v-show="show" class="div">rotate-right</div>
</transition>
<transition name="rotate-x">
    <div v-show="show" class="div">rotate-x</div>
</transition>
<transition name="rotate-y">
    <div v-show="show" class="div">rotate-y</div>
</transition>

<script>
export default {
  data(){
    return {
      show: true
    }
  }
}
</script>