IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • 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中。