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
网友评论