vue系列之过渡效果

参考地址：http://cn.vuejs.org/v2/guide/transitions.html

vue2.0，要想实现过渡效果，要用transition组件

代码：

<div id="demo">

  <button v-on:click="show = !show">

    Toggle

  </button>

  <transition name="fade">

    <p v-if="show">hello</p>

  </transition>

</div>

 

new Vue({

  el: '#demo',

  data: {

    show: true

  }

})

 

.fade-enter-active, .fade-leave-active {

  transition: opacity .5s

}

.fade-enter, .fade-leave-active {

  opacity: 0

}