过渡效果 && 动画
官方文档:
https://cn.vuejs.org/v2/guide/transitions.html
- 使用形式
-
在 CSS 过渡和动画中自动应用 class
Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
例子:
html: <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div>
css: .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; }
javascript: new Vue({ el: '#demo', data: { show: true } })
当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:
1、自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。 2、如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。 3、如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作 (插入/删除) 在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和 Vue 的 nextTick 概念不同)
过渡的类名:
1、v-enter:
- 定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
2、v-enter-active:
- 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数
3、v-enter-to:
- 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
4、v-leave:
- 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
5、v-leave-active:
- 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
6、v-leave-to:
- 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
-
可以配合使用第三方 CSS 动画库,如 Animate.css
引入第三方css动画库: <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <div id="app"> <button @click = "change"> 切换 </button> <transition enter-active-class = "animated slideInLeft" leave-active-class = "animated slideOutLeft" > <p v-show = "flag"> Vue </p> </transition> </div>
javascript: new Vue({ el: '#app', data: { flag: false }, methods: { change () { this.flag = !this.flag } } })
动画的类名点击 https://daneden.github.io/animate.css/ 此链接;
(里面in和out要成对使用;例:slideInLeft和slideOutLeft;并且在库类名之前要加上animated类名) -
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以在属性中声明 JavaScript 钩子:
<transition 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" > <!-- ... --> </transition>
methods: { // -------- // 进入中 // -------- beforeEnter: function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // 离开时 // -------- beforeLeave: function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 只用于 v-show 中 leaveCancelled: function (el) { // ... } }
- 可以配合使用第三方 JavaScript 动画库,如 Velocity.js
new Vue({ el: '#app', data: { show: false }, methods: { beforeEnter: function (el) { //el指的就是dom console.log( 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 }) } } })
-
- 过渡模式 mode
- in-out 先进入在离开
- out-in 先离开在进入
<div id="app">
<button @click = "change"> 切换 </button>
<transition
mode = "in-out"
enter-active-class = "animated slideInLeft"
leave-active-class = "animated slideOutLeft"
>
<p v-if = "flag"> Vue </p>
</transition>
<transition
mode = "out-in"
enter-active-class = "animated slideInLeft"
leave-active-class = "animated slideOutLeft"
>
<p v-if = "!flag"> 毛毛 </p>
</transition>
</div>
new Vue({
el: '#app',
data: {
flag: true
},
methods: {
change () {
this.flag = !this.flag
}
}
})