v-showでfadeInなどを使用する方法

Question

v-showでfadeInエフェクトを使用する必要があります。 クリックがアイテムCadastroに発砲したときに機能を発動することができますが、v-showが発動したときには動作を制御できません。

HTML

<div class="container-fluid" id="app"> 
     <div class="row-fluid"> 
      <div class="top-menu col-md-12"> 
       <div class="col-md-3 item-menu"> 
        <a @click="showCadastro()">Cadastro</a> 
       </div> 
       <div class="col-md-3 item-menu"> 
        <a>Imprimir</a> 
       </div> 
      </div> 
      <div class="row" v-show="subMenuCadastro"> 
       <div class="col-md-3 sub-menu"> 
        <div class="row-fluid"> 
        <a>Produto</a> 
        <div class="row-fluid"> 
        <a>Cliente</a> 
        </div> 
        <div class="row-fluid"> 
        <a>Técnico</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

JS

var App = new Vue({ 
    el: '#app', 
    data: { 
    subMenuCadastro: false 
    } 
}) 

App.showCadastro = function() { 
    this.subMenuCadastro = !this.subMenuCadastro; 
} 

Answer 1

あなたは、トランジションを使用することができます：あなたが使用するためv-forは、いくつかのクラスを作成します持っている要素のtransitionプロパティを設定https://vuejs.org/guide/transitions.html

あなたのCSSで：

<div class="row" v-show="subMenuCadastro" transition="fadeIn"> 
    ... 
</div> 

次に、要素で次のクラスを使用できます。fadeIn-transition、fadeIn-enter、fadeIn-leave。詳細については、ドキュメントをご覧ください。

ここに実例があります。https://jsfiddle.net/q3c81c5q/