Vue.jsの遷移を動的に変更するには

Question

ユーザの動作に応じてどのようなアニメーションが発生するかを動的に変更したい。たとえば、最初のボタンがクリックされ、leaveアニメーションが呼び出されると、「hello」要素はbounceOutRightアニメーションを使用する必要があります。ただし、ユーザーが2番目のボタンをクリックすると、「hello」要素でbounceOutLeftアニメーションを使用する必要があります。この例はvue.js documentationから来ており、私はそれを拡張しようとしています。 vueの例のように、animate.cssライブラリを使用します。

私はv-bind：leave-active-class = "animated bounceOutRight"を使ってみましたが、無効な表現としてエラーを投げました。

<button @click="show = !show"> 
    Toggle Bounce Right 
</button> 
<button @click="show = !show"> 
    Toggle Bounce Left 
</button> 
<transition 
    name="custom-classes-transition" 
    enter-active-class="animated tada" 
    leave-active-class="animated bounceOutRight" 
> 
    <p v-if="show">hello</p> 
</transition> 

Answer 1

あなたは、この目的のためにv-bindを使用することができ、あなたはvue data変数としてトランジションの名前を持っているし、次のことができることを確認して、それが動的であることを確認します。

<transition 
    v-bind:name="className" 
    v-bind:enter-active-class="enterClassName" 
    v-bind:leave-active-class="leaveClassName" 
> 

または短い

で

<transition 
    :name="className" 
    :enter-active-class="enterClassName" 
    :leave-active-class="leaveClassName" 
>