标签：技术 过程 demo style data nbsp 动画 pac show
vue为节点插入、更新、删除时提供了css过渡工具
1.自动添加class类名
2.整合第三方动画库
以下是官网的示例
HTML
<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div>
JS
new Vue({ el: ‘#demo‘, data: { show: true } })
CSS
.fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ { opacity: 0 }
效果如下
过程分析:
1.点击按钮，show的值变为false
2.v-if的值为false，引起p节点删除操作
3.★transition检测到删除操作发生，为变化元素添加类fade-leave-active
4.★将变化元素添加类fade-leave-to，激发transition
5.删除节点
标签：技术 过程 demo style data nbsp 动画 pac show
原文地址：http://www.cnblogs.com/heinz-lxy/p/6858849.html
