vuejs的transition钩子函数在组件中如何使用?

枫s的思念
  • 2.4k

根据vuejs官方文档,可以在动画执行前,利用钩子函数进行一些操作,如果是全局钩子对象,则通过

Vue.transition('fade', {
  enter: function () {},
  leave: function () {}
})

但是我在.vue文件中写的时候,用的是

export default{
    data(){}
}

此时该如何利用钩子函数控制动画呢?官方文档中有一个transitions选项,但是如何使用呢?

回复
阅读 4.3k
1 个回答
✓ 已被采纳

Vue.transition 是定義一個全局的 Transition 鉤子,可以在鉤子內進行很多事情,例如最常用的

  • 自定義過度類名

  • 事件調用鉤子

那如果是只想要在針對組件去定義的話:


export default {
   
  transition: {
    
    'fade': {
      enter() {},
      leave() {}
    }
    
  }
   
}

這樣 fade 這個過渡鉤子就只會作用於組件內,如果同時有同名的全局與組件內的話,會優先使用組件定義的

這邊寫了個簡單的例子來解釋鉤子的流程:
jsFiddle

至於更詳細的過渡操作,最好的教程還是看 Vue 的官方文檔
過渡

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏