vue企业发展历程动画_Vue.js 过渡&动画

概述

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

包括以下工具：在 CSS 过渡和动画中自动应用 class

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

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

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

单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡：条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

例子：

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

/* .fade-leave-active in below version 2.1.8 */

.fade-enter, .fade-leave-to{opacity: 0}

Toggle

hello

new Vue({

el: ‘#demo’,

data: {

show: true

}

});

过程理解

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

1、自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。/

2、如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。

3、如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作(插入/删除)在下一帧中立即执行。

过渡的-CSS-类名

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

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

v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效(于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。

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

v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效(于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

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

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

CSS 过渡

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

下面是一个简单例子：

Toggle render

hello

new Vue({

el: ‘#example-1’,

data: {

show: true

}

})

/* 可以设置不同的进入和离开动画 */

/* 设置持续时间和动画函数 */

/* ease 规定慢速开始，然后变快，然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。*/

/* 贝塞尔曲线 cubic-bezier */

.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-to

/* .slide-fade-leave-active for below version 2.1.8 */ {

transform: translateX(10px);

opacity: 0;

}

CSS 动画

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

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

Toggle show

Look at me!

new Vue({

el: ‘#example-2’,

data: {

show: true

}

})

.bounce-enter-active {

animation: bounce-in .5s;

}

.bounce-leave-active {

animation: bounce-in .5s reverse;

}

@keyframes bounce-in {

0% {

transform: scale(0);

}

50% {

transform: scale(1.5);

}

100% {

transform: scale(1);

}

}

自定义过渡类名

我们可以通过以下特性来自定义过渡类名：enter-class

enter-active-class

enter-to-class (2.1.8+)

leave-class

leave-active-class

leave-to-class (2.1.8+)

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

示例：

Toggle render

name=”custom-classes-transition”

enter-active-class=”animated tada”

leave-active-class=”animated bounceOutRight”

>

hello

new Vue({

el: ‘#example-3’,

data: {

show: true

}

})

JavaScript 钩子

可以在属性中声明 JavaScript 钩子

v-on:before-enter=”beforeEnter”

v-on:enter=”enter”

v-on:after-enter=”afterEnter”

v-on:enter-cancelled=”enterCancelled”

v-on:before-leave=”beforeLeave”

v-on:leave=”leave”

v-on:after-leave=”afterLeave”

v-on:leave-cancelled=”leaveCancelled”>

// …

methods: {

// ——–

// 进入中

// ——–

beforeEnter: function (el) {

// …

},

// 此回调函数是可选项的设置

// 与 CSS 结合时使用

enter: function (el, done) {

// …

done()

},

afterEnter: function (el) {

// …

},

enterCancelled: function (el) {

// …

},

// ——–

// 离开时

// ——–

beforeLeave: function (el) {

// …

},

// 此回调函数是可选项的设置

// 与 CSS 结合时使用

leave: function (el, done) {

// …

done()

},

afterLeave: function (el) {

// …

},

// leaveCancelled 只用于 v-show 中

leaveCancelled: function (el) {

// …

}

}

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。 否则，它们会被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=”false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

一个使用 Velocity.js 的简单例子：

Toggle

v-on:before-enter=”beforeEnter”

v-on:enter=”enter”

v-on:leave=”leave”

v-bind:css=”false”

>

Demo

new Vue({

el: ‘#example-4’,

data: {

show: false

},

methods: {

beforeEnter: function (el) {

el.style.opacity = 0

el.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 })

}

}

})