Vue动画中的JS钩子

2019年3月18日12:16:13 发表评论 阅读(307)

Vue动画中的JS钩子

这些钩子可以在transition属性中声明就可以了,具体有哪些钩子呢?

before-enter

在即将显示的时候触发,并且会接收一个el的参数,el参数为transition属性内包裹的元素

  1. <transition
  2.         @before-enter="beforeEnter"
  3.     >
  4. </transition>
  1. methods: {
  2.             beforeEnter: function (el) {
  3.                 el.style.color = 'red'
  4.             }
  5.         }

 enter

在before-enter之后执行

  1. <transition
  2.         @before-enter="beforeEnter"
  3.         @enter="enter"
  4.     >
  5. </transition>
  1. methods: {
  2.             enter: function (el,done) {
  3.                 setTimeout(function () {
  4.                     el.style.color = 'blue'
  5.                     done()
  6.                 },2000)
  7.             }
  8.         }

after-enter

在enter之后执行

  1. <transition
  2.         @before-enter="beforeEnter"
  3.         @enter="enter"
  4.         @after-enter="afterEnter"
  5.     >
  6. </transition>
  1. methods: {
  2.          afterEnter: function (el) {
  3.                 setTimeout( () => {
  4.                     el.style.color = 'yellow'
  5.                 },4000)
  6.             }
  7. }

以上3个钩子作用于进场动画中。另外还有3个离场动画的钩子,与以上使用方法相同。

before-leave

在即将离开的时候触发

  1. <transition
  2.         @before-leave="beforeLeave"
  3.     >
  4. </transition>
  1. methods: {
  2.             beforeLeave: function (el) {
  3.                 console.log('触发离开')
  4.             }
  5.         }

leave

在before-leave之后执行

  1. <transition
  2.         @before-leave="beforeLeave"
  3.         @leave="leave"
  4.     >
  5. </transition>
  1. methods: {
  2.             leave: function (el,done) {
  3.                 done()
  4.                 console.log('离开中')
  5.             }
  6.         }

after-leave

在leave之后执行

  1. <transition
  2.         @before-leave="beforeLeave"
  3.         @leave="leave"
  4.         @after-leave="afterLeave"
  5.     >
  6. </transition>
  1. methods: {
  2.          afterLeave: function (el) {
  3.                 console.log('离开完成')
  4.             }
  5. }

整个流程效果:点我查看

注意

当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。

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

velocity.js

velocity.js是一个常用的js动画库,可以实现一些酷炫的动画效果,厉害的是你可以利用这个库中的语法来自定义动画,而且是纯js实现的效果。

demo:点我查看

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛