Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)

<div id="demo">
 <button v-on:click="show = !show">Toggle</button>
 <transition :duration="{ enter: 500, leave: 1000 }" name="xxx" enter-active-class="animated shake" leave-active-class="animated shake">
  <p v-if="show">小火柴的蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

过渡条件

一般地，在Vue中满足下列任意一个过渡条件，即可添加过渡效果

条件渲染(使用v-if)

常见的条件是使用条件渲染，使用v-if

<style>
.fade-enter,.fade-leave-to{
 opacity:0;
}
.fade-enter-active,.fade-leave-active{
 transition:opacity 1s;
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>
 <transition name="fade">
  <p v-if="show">蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

条件展示(使用v-show)

使用条件展示，即使用v-show时，也可以添加过渡效果

<div id="demo">
 <button v-on:click="show = !show">Toggle</button>
 <transition name="fade">
  <p v-show="show">蓝色理想</p>
 </transition>
</div>

动态组件

使用is属性实现的动态组件，可以添加过渡效果

<div id="demo">
 <button v-on:click="show = !show">Toggle</button>
 <transition name="fade">
  <component :is="view"></component>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 components:{
  'home':{template:'<div>蓝色理想</div>'}
 },
 data: {
  show: true,
 },
 computed:{
  view(){
   return this.show ? 'home' : '';
  }
 }
})

更多关于Vue动画效果的文章请点击下面的相关链接