这些钩子可以在transition属性中声明就可以了，具体有哪些钩子呢？
before-enter
在即将显示的时候触发，并且会接收一个el的参数，el参数为transition属性内包裹的元素
- <transition
- @before-enter="beforeEnter"
- >
- </transition>
- methods: {
- beforeEnter: function (el) {
- el.style.color = 'red'
- }
- }
enter
在before-enter之后执行
- <transition
- @before-enter="beforeEnter"
- @enter="enter"
- >
- </transition>
- methods: {
- enter: function (el,done) {
- setTimeout(function () {
- el.style.color = 'blue'
- done()
- },2000)
- }
- }
after-enter
在enter之后执行
- <transition
- @before-enter="beforeEnter"
- @enter="enter"
- @after-enter="afterEnter"
- >
- </transition>
- methods: {
- afterEnter: function (el) {
- setTimeout( () => {
- el.style.color = 'yellow'
- },4000)
- }
- }
以上3个钩子作用于进场动画中。另外还有3个离场动画的钩子，与以上使用方法相同。
before-leave
在即将离开的时候触发
- <transition
- @before-leave="beforeLeave"
- >
- </transition>
- methods: {
- beforeLeave: function (el) {
- console.log('触发离开')
- }
- }
leave
在before-leave之后执行
- <transition
- @before-leave="beforeLeave"
- @leave="leave"
- >
- </transition>
- methods: {
- leave: function (el,done) {
- done()
- console.log('离开中')
- }
- }
after-leave
在leave之后执行
- <transition
- @before-leave="beforeLeave"
- @leave="leave"
- @after-leave="afterLeave"
- >
- </transition>
- methods: {
- afterLeave: function (el) {
- console.log('离开完成')
- }
- }
整个流程效果：点我查看
注意
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
velocity.js
velocity.js是一个常用的js动画库，可以实现一些酷炫的动画效果，厉害的是你可以利用这个库中的语法来自定义动画，而且是纯js实现的效果。
demo：点我查看
微信小程序
互联网开发，终身学习者，欢迎您的关注！
