VUE过渡效果

VUE有封装好的组件，当你需要展示或者隐藏或者渲染某个内容，可以给他外层包裹一层transition

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

  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>

CSS中

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

这样点击按钮Toggle会使hello逐渐消失，其实就是CSS3的应用。

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

也有更加详细的进入/离开过渡的具体某一阶段自定义事件，参见VUE官网文档
https://cn.vuejs.org/v2/guide/transitions.html