Vuejs transition v-on：を入力します。 「完了」コールバックとは何ですか？

Question

私は「V-で次のように入力します。」に追加のパラメータを渡す必要があります。私は知らないので、私のVue

methods:{ 
stretch: function (properties,el,done) { 
    var delay = el.dataset.index * 150 
    setTimeout(function() { 
     Velocity(
     el, 
     properties, 
     { complete: done } 
     ) 
    }, delay) 
    }, 

にそれは動作しません...

<transition v-on:enter="stretch($event,done?,{opacity:1,width:'400px')"></transition> 

フック

：作業が、再利用可能ではありません何明示的に（フック を入力して必須です） 行わコールバック

を渡す方法

<transition v-on:enter="stretch"></transition> ...ドキュメントの

methods:{ 
stretch: function (el,done) { 
    var delay = el.dataset.index * 150 
    setTimeout(function() { 
     Velocity(
     el, 
     { opacity: 1, width: 400px }, 
     { complete: done } 
     ) 
    }, delay) 
    }, 

リンク：https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

は、誰も私を助けることができますか？前もって感謝します。

Answer 1

ソリューションのようなものになります。

<transition v-on:enter="stretch(arguments, {opacity:1,width:'400px'})">`</transition> 

methods: { 
    stretch(args, properties) { 
    // args[0] === el 
    // args[1] === done() 
    } 
} 

は、それが仕えることを願っています。

Answer 2

はdocumentation Vue.js v2遷移フックのみ2つのパラメータを受け付ける入力によれば、それらは、次のとおりのJavaScriptのみ使用する場合も

コールバック

を行う

• 素子
• トランジション、完了したコールバックはの場合との場合はのままにしてください。さもなければ、それらは同期的に呼び出され、移行は直ちに終了する。

これで、試した方法で他のパラメータを渡すことはできません。しかし、v-bindを使用することができます。このような場合、あなたの例では、この

HTML

<transition v-on:enter="stretch" v-bind="styles={opacity:1,width:'400px'}"></transition> 

とJS

data : { 
... 
    styles: {} 
}, 
methods: { 
... 
    stretch: function (el,done) { 
    var delay = el.dataset.index * 150; 
    setTimeout(function() { 
     Velocity(
     el, 
     this.styles, 
     { complete: done } 
     ) 
    }, delay); 
    },