Vue.js 过渡 & 动画

leaveCancelled:





function (el) {// ...}}这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:





css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。一个使用 Velocity.js 的简单例子：实例<div id = "databinding"><button v-on:





click = "show = !show">点我</button><transitionv-on:





before-enter="beforeEnter"v-on:





enter="enter"v-on:





leave="leave"v-bind:





css="false"><p v-if="show">k88.net -- 学的不仅是技术，更是梦想！！！</p></transition></div><script type = "text/javascript">new Vue({el:





'





#databinding',data:





{show:





false},methods:





{beforeEnter:





function (el) {el.style.opacity = 0el.style.transformOrigin = 'left'},enter:





function (el, done) {Velocity(el, { opacity:





1, fontSize:





'1.4em' }, { duration:





300 })Velocity(el, { fontSize:





'1em' }, { complete:





done })},leave:





function (el, done) {Velocity(el, { translateX:





'15px', rotateZ:





'50deg' }, { duration:





600 })Velocity(el, { rotateZ:





'100deg' }, { loop:





2 })Velocity(el, {rotateZ:





'45deg',translateY:





'30px',translateX:





'30px',opacity:





0}, { complete:





done })}}})</script>尝试一下 ?初始渲染的过渡可以通过 appear 特性设置节点在初始渲染的过渡<transition appear> <!-- ... --></transition>这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。<transition appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" (2.1.8+) appear-active-class="custom-appear-active-class"> <!-- ... --></transition>自定义 JavaScript 钩子：<transition appear v-on:





before-appear="customBeforeAppearHook" v-on:





appear="customAppearHook" v-on:





after-appear="customAfterAppearHook" v-on:





appear-cancelled="customAppearCancelledHook"> <!-- ... --></transition>多个元素的过渡我们可以设置多个元素的过渡，一般列表与描述：需要注意的是当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。<transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>抱歉，没有找到您查找的内容。</p></transition>如下实例：<transition> <button v-if="isEditing" key="save"> Save </button> <button v-else key="edit"> Edit </button></transition>在一些场景中，也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为：<transition> <button v-bind:





key="isEditing"> {{ isEditing ? 'Save' :





'Edit' }} </button></transition>使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。例如：<transition> <button v-if="docState === 'saved'" key="saved"> Edit </button> <button v-if="docState === 'edited'" key="edited"> Save </button> <button v-if="docState === 'editing'" key="editing"> Cancel </button></transition>可以重写为：<transition> <button v-bind:





key="docState"> {{ buttonMessage }} </button></transition>// ...computed:





{ buttonMessage:





function () { switch (this.docState) { case 'saved':





return 'Edit' case 'edited':





return 'Save' case 'editing':





return 'Cancel' } }}