根据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
的官方文檔
過渡