网站开发培训-高端面授网站开发培训机构
云和教育:云和数据集团高端IT职业教育品牌
  • 华为
    授权培训中心
  • 腾讯云
    一级认证培训中心
  • 百度营销大学
    豫陕深授权运营中心
  • Oracle甲骨文
    OAEP中心
  • Microsoft Azure
    微软云合作伙伴
  • Unity公司
    战略合作伙伴
  • 普华基础软件
    战略合作伙伴
  • 新开普(股票代码300248)
    旗下丹诚开普投资
  • 中国互联网百强企业锐之旗
    旗下锐旗资本投资

钩子函数实现动画的方式

  • 发布时间:
    2023-04-07
  • 版权所有:
    云和教育
  • 分享:

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中。