按照vue文档使用JavaScript钩子但是却不能执行动画？

时间：2024-01-21 14:41:22

按照vue文档使用JavaScript钩子但是却不能执行动画？

2018-09-09 21:49 by .智子, ... 阅读, ... 评论, 收藏, 编辑

大家刚入VUE肯定是先去阅读文档，

在 进入/离开 & 列表过渡 这一章节有一小节 ---------  JavaScript钩子

详情见vue文档：  https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90

 

JavaScript钩子

可以在属性中声明 JavaScript 钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

当我们按照以上代码来编写动画时，

发现动画并不能执行，

其实我们只需要添加一个 `刷新动画帧` 就好了

只是刷新动画帧一定要设置在结束位置之前，整个动画只需要设置一次

 

按照下图所示的就好了，能够正常执行动画了

 

相关文章