Vue中使用 transition动画，vue过渡动画

Vue的动画并没有非常炫酷的效果，不过也是有一些实用性的，在项目中有的地方使用，也是能够营造出不同的效果

下面为大家列举两个简单实现动画的例子，动画其实很简单，就是利用transition标签

案例;点击按钮 实现内容切换---动画显示是淡隐淡出的效果

<style>
.fade-enter, .fade-leave-to {
  opacity: 0
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
</style>

<div id="demo">
  <button v-on:click="show = !show">
     切换按钮
  </button>
 <!--1. 使用transition元素把需要被动画控制的元素，包裹起来  里面name="fade"上面class就是fade开头-->
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
<script>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
</script>

如果name