三、JavaScript 钩子
1,基本介绍
我们可以在 transition 属性中声明 JavaScript
钩子,这些钩子函数可以结合 CSS transitions/animations
使用,也可以单独使用。
注意:
当只用 JavaScript 过渡时,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false",Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
<template>
<div id="app">
<button @click="show = !show">显示/隐藏</button>
<br>
<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">
<img v-show="show" src="./assets/logo.png">
</transition>
</div>
</template>
<script>
export default {
name: 'App',
data: function(){
return {
show: true
}
},
methods: {
// --------
// 过渡进入中
// --------
// 设置过渡进入之前的组件状态
beforeEnter: function (el) {
// ...
},
// 设置过渡进入完成时的组件状态
enter: function (el, done) {
// ...
done()
},
// 设置过渡进入完成之后的组件状态
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 过渡离开时
// --------
// 设置过渡离开之前的组件状态
beforeLeave: function (el) {
// ...
},
// 设置过渡离开完成时地组件状态
leave: function (el, done) {
// ...
done()
},
// 设置过渡离开完成之后的组件状态
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
}
</script>
2,使用样例
(1)效果图
- 通过点击按钮对下方图片进行显示或隐藏(交替)。
- 图片在显示或隐藏的过程中,会有淡入淡出的效果。只不过这个效果不再是通过
CSS
实现,而是在钩子函数中借助Velocity.js
来实现。
(2)样例代码
Velocity 库可以在项目中运行如下命令进行安装:
npm install velocity-animate --save-dev
<template>
<div id="app">
<button @click="show = !show">显示/隐藏</button>
<br>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false">
<img v-show="show" src="./assets/logo.png">
</transition>
</div>
</template>
<script>
import Velocity from 'velocity-animate'
export default {
name: 'App',
data: function(){
return {
show: true
}
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, {
rotateZ: '0deg',
translateY: '0px',
translateX: '0px',
opacity: 1
}, { complete: done })
},
leave: function (el, done) {
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
}
</script>
附:初始渲染的过渡
对于初始渲染的过渡,同样有提供相应的钩子函数。我们可以在这些钩子函数中实现相应的动画。
<transition
appear
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook"
v-on:appear-cancelled="customAppearCancelledHook"
>
<!-- ... -->
</transition>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。