标签：规则 消失 java css样式 ica filter 删除 检测 目标
通过 Vue.js 的过渡系统，你可以轻松的为 DOM 节点被插入/移除的过程添加过渡动画效果。Vue 将会在适当的时机添加/移除 CSS 类名来触发 CSS3 过渡/动画效果，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。
以 v-transition="my-transition 这个指令为例，当带有这个指令的 DOM 节点被插入或移除时，Vue 将会：
1.用 my-transition这个 ID 去查找是否有注册过的 JavaScript 钩子对象。这个对象可以是由 Vue.transition(id, hooks) 全局注册，或是通过 transitions选项定义在当前的组件内部。如果找到此对象，则会在过渡动画不同的阶段调用相应的钩子。
2.自动探测目标元素是否应用了 CSS 过渡效果或者动画效果，并在适当的时机添加/移除 CSS 类名。
3.如果没有提供 JavaScript 钩子函数，也没有检测到相应的 CSS 过渡/动画效果，DOM 的插入/移除会在下一帧立即执行。
<div v-if="show" transition="my-transition"></div>
所有的 Vue.js 过渡效果只有在该 DOM 操作是通过 Vue.js 触发时才会生效。触发的方式可以是通过内置指令，比如 v-if，或是通过 Vue 实例的方法，比如 vm.$appendTo()。
一个典型的 CSS 过渡效果定义如下：
<div v-if="show" v-transition="expand">hello</div>
然后为.expand-transition，.expand-enter 和.expand-leave 添加 CSS 规则:
/* 必需 */ .expand-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden; } /* .expand-enter 定义进入的开始状态 */ /* .expand-leave 定义离开的结束状态 */ .expand-enter, .expand-leave { height: 0; padding: 0 10px; opacity: 0; }
另外，可以提供 JavaScript 钩子:
Vue.transition(‘expand‘, { beforeEnter: function (el) { el.textContent = ‘beforeEnter‘ }, enter: function (el) { el.textContent = ‘enter‘ }, afterEnter: function (el) { el.textContent = ‘afterEnter‘ }, enterCancelled: function (el) { // handle cancellation }, beforeLeave: function (el) { el.textContent = ‘beforeLeave‘ }, leave: function (el) { el.textContent = ‘leave‘ }, afterLeave: function (el) { el.textContent = ‘afterLeave‘ }, leaveCancelled: function (el) { // handle cancellation } })
说简单点就是我们在操作某个元素时，当v-if的值为发生变化时，就会引起transition的变化，从而使的CSS样式改变。
类名的添加和切换取决于 transition特性的值。比如 transition="fade"，会有三个 CSS 类名：
1）.fade-transition 始终保留在元素上。
2）.fade-enter 定义进入过渡的开始状态。只应用一帧然后立即删除。
3）.fade-leave 定义离开过渡的结束状态。在离开过渡开始时生效，在它结束后删除。
如果 transition 特性没有值，类名默认是 .v-transition, .v-enter 和 .v-leave。
根据我们第一节中的代码来讲解过渡流程：
当 show 属性改变时，Vue.js 将相应地插入或删除div元素，按照如下规则改变过渡的 CSS 类名：
如果 show 变为 false，Vue.js 将：
如果 show 变为 true，Vue.js 将：
渐近过渡
transition 与 v-for 一起用时可以创建渐近过渡。给过渡元素添加一个特性 stagger, enter-stagger 或 leave-stagger， 如下代码：
<div v-for="list" transition stagger="100"></div>
或者，提供一个钩子 stagger, enter-stagger 或 leave-stagger，以更好的控制. 如下代码：
Vue.transition(‘stagger‘, { stagger: function (index) { // 每个过渡项目增加 50ms 延时 // 但是最大延时限制为 300ms return Math.min(300, index * 50) } })
如下实例html代码：
<div id="demo"> <input v-model="query"> <ul> <li v-for="item in list | filterBy query" transition="staggered" stagger="100"> {{item.msg}} </li> </ul> </div>
js代码：
new Vue({ el: ‘#demo‘, data: { query: ‘‘, list: [ { msg: ‘Bruce Lee‘ }, { msg: ‘Jackie Chan‘ }, { msg: ‘Chuck Norris‘ }, { msg: ‘Jet Li‘ }, { msg: ‘Kung Fury‘ } ] } })
CSS代码：
ul { padding-left: 0; font-family: Helvetica, Arial, sans-serif; } .staggered-transition { transition: all .5s ease; overflow: hidden; margin: 0; height: 20px; } .staggered-enter, .staggered-leave { opacity: 0; height: 0; }
以上代码的效果为:当我们在文本框中输入值时，会看到列表逐渐消失，删除内容时，会看到列表显示。
标签：规则 消失 java css样式 ica filter 删除 检测 目标
原文地址：http://www.cnblogs.com/QianBoy/p/7912033.html
