Vue.2.0.5过渡效果使用技巧

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。

包括以下工具:

在 CSS 过渡和动画中自动应用 class

可以配合使用第三方 CSS 动画库,如 Animate.css

在过渡钩子函数中使用 JavaScript 直接操作 DOM

可以配合使用第三方 JavaScript 动画库,如 Velocity.js

在这里,我们只会讲到进入、离开和列表的过渡, 你也可以看下一节的 管理过渡状态.

单元素/组件的过渡

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡

条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

这里是一个典型的例子: 

<div> <button v-on:click="show = !show"> Toggle </button> <transition> <p v-if="show">hello</p> </transition> </div>

new Vue({ el: '#demo', data: { show: true } })

.fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-active { opacity: 0 }

元素封装成过渡组件之后,在遇到插入或删除时,Vue 将

1.自动嗅探目标元素是否有 CSS 过渡或动画,并在合适时添加/删除 CSS 类名。

2.如果过渡组件设置了过渡的 JavaScript 钩子函数,会在相应的阶段调用钩子函数。

3.如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作(插入/删除)在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,与 Vue,和Vue的nextTick 概念不同)

过渡的-CSS-类名

会有 4 个(CSS)类名在 enter/leave 的过渡中切换

1.v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。

2.v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在transition/animation 完成之后移除。

3.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。

4.v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在transition/animation 完成之后移除。

Vue.2.0.5过渡效果使用技巧

对于这些在 enter/leave 过渡中切换的类名,v- 是这些类名的前缀。使用<name="my-transition>" 可以重置前缀,比如 v-enter 替换为my-transition-enter。

v-enter-active 和 v-leave-active 可以控制 进入/离开 过渡的不同阶段,在下面章节会有个示例说明。

CSS 过渡

常用的过渡都是使用 CSS 过渡。

下面是一个简单例子:

<div> <button @click="show = !show"> Toggle render </button> <transition> <p v-if="show">hello</p> </transition> </div>

new Vue({ el: '#example-1', data: { show: true } })

/* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-active { padding-left: 10px; opacity: 0; }

CSS 动画

CSS 动画用法同 CSS 过渡,区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除。

示例: (省略了兼容性前缀) 

<div> <button @click="show = !show">Toggle show</button> <transition> <p v-if="show">Look at me!</p> </transition> </div>

new Vue({ el: '#example-2', data: { show: true } })

.bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-out .5s; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes bounce-out { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(0); } }

自定义过渡类名

我们可以通过以下特性来自定义过渡类名:

enter-class

enter-active-class

leave-class

leave-active-class

他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如Animate.css 结合使用十分有用。

示例:

<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" type="text/css"> <div> <button @click="show = !show"> Toggle render </button> <transition enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello</p> </transition> </div>

new Vue({ el: '#example-3', data: { show: true } })

同时使用 Transitions 和 Animations

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwwzxg.html