javascript - vuejs的transition钩子函数在组件中如何使用？

问题描述

问 题

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

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

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

export default{
    data(){}
}

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

解决方案

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

• 自定義過度類名

• 事件調用鉤子

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

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

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

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

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

这篇关于javascript - vuejs的transition钩子函数在组件中如何使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！