Vue.jsという名前のjavascriptフック

Question

私はVue.jsをvelocity.jsに接続しようとしています。このガイドは例を示していますが、名前付きトランジションは使用していません。

<transition name="collapse"> 

https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

Vue.jsドキュメントから与えられた例がそうのような遷移元素を設定しています：

<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" 
> 

が行うための方法ではありません現在、私の推移は次のようになりますこれをすべて自動的に設定する必要はありません。もちろん、2番目のステップは、これをすべて設定することなく、名前付きアニメーションを作成するだけです。

collapseEnter, collapseEnterCancelled, etc. 

をしかし、これは動作するようには思えません。

好ましく私Vue.jsコンポーネントのメソッドは、このような何かをしたいと思います。私は実際にすべての指令を設定する必要がありますか、それとも簡単な方法がありますか？

Answer 1

する必要があります。しかし、<transition>をラップする抽象コンポーネントを作成することによって、これらのフック関数を自動的にバインドすることは可能です。

これはハックですが、うまくいくはずです。

まず、我々はautoTransitionと呼ばれるコンポーネントの登録：

Vue.component('autoTransition', { 
    props: ['name', 'vm'], 
    functional: true, 
    abstract: true, 
    render (h, ctx) { 
    return h('transition', { 
     name: ctx.props.name, 
     on: { 
     'before-enter': ctx.props.vm.beforeEnter, 
     'enter': ctx.props.vm.enter, 
     // ... other hooks 
     } 
    }, ctx.children) 
    } 
}) 

をそして、あなたは、通常の移行のようにそれを使用するが、代わりにすべてのフックを渡すので、あなたは今、単に全体vm（$rootによって参照することができますを渡すことができます）とnameが必要な場合に備えて：

​​

Answer 2

AFAIKこの名前は、CSSクラスをトランジションに適用する場合にのみ使用されます。それはjavascriptフックとは関係ありません。だから、すべてのフックを明示的に定義する必要があります。