教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

钩子函数实现动画的方式

更新时间:2022年01月24日11时45分 来源:传智教育 浏览次数:

Vue中可以使用CSS动画,我们还可以通过JavaScript来实现动画。我们在标签中定义了一些动画钩子函数,可以来实现动画。

钩子函数可以结合CSS过渡(transitions)、动画(animations)使用,还可以单独使用,示例代码如下:

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  v-bind:css="false">
</transition>

在以上代码中,入场钩子函数分别是beforeEnter(入场前)、enter(入场)、afterEnter(入场后)和enterCancelled(取消入场),出场钩子函数分别是beforeLeave(出场前)、leave(出场)、afterLeave(出场后)和leaveCancelled(取消出场)。第10行行为仅使用JavaScript过渡的元素添加v-bind:css=”false”,表示给CSS绑定了false值,Vue会跳过CSS的检测,避免过渡过程中受到CSS的影响。

下面我们演示如何在methods中编写钩子函数,示例代码如下:

methods: {
    // beforeEnter 入场钩子函数
    // 动画入场之前,此时动画尚未开始,设置元素开始动画之前的起始样式
    beforeEnter(el) {},
    // enter用于设置动画开始之后的样式
    enter(el, done) {
        // ...
        done()
    },
    // 在入场动画完成之后会调用
    afterEnter(el) {},
    enterCancelled(el) {},
    // 出场钩子函数
    beforeLeave(el) {},
    leave(el, done) {
        // ...
        done()
    },
    afterLeave(el) {},
    leaveCancelled(el) {},
}

上述代码中,所有的钩子函数都会传入el参数(el为element的缩与),el指的是动画包裹的标签。其中,enter和 leave动画钩子函数,还会传入done作为参数,用来告知 Vue动画结束。在enter和 leave中,当与CSS结合使用时,回调函数done是可选的,而当使用JavaScript过渡的时候,回调函数done是必须的,否则过渡会立即完成。

enterCancelled和 leaveCancelled动画钩子函数只应用于v-show中。

0 分享到:
和我们在线交谈!