【Vue.js】transitionを使ってBootstrapのModalをvue.jsで表示する

Tweet

Category JavaScript / Tagged vue 2017/02/11

問題

CSSはbootstrap.cssを利用して、動きはvue.jsで、BootstrapのModalを表示したい。

答え

bootstrapのモーダルは、.fadeに.inを追加して.fade.inにすると、CSSのtransitionが効く。

アニメーション前とアニメーション後に表示状態（display）を調整するとよい様子。

単純なclassの付与、削除ならば、vueのtransitionのenter-class、enter-to-classなどの設定で対応できるのだが、bootstrapのCSSはそうではなさそうなので、以下のようにしてみた。

<transition 
      v-on:enter="function(el){$(el).css('display', 'block')}"
      v-on:after-enter="function(el){$(el).addClass('in')}"
      v-on:leave="function(el){$(el).removeClass('in')}"
      v-on:after-leave="function(el){$(el).css('display', 'none')}">
  <div class="modal fade" v-show="show">>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" v-on:click="show=false"><span>&times;</span></button>
          <h4 class="modal-title">モーダルのタイトル</h4>
        </div>
        <div class="modal-body">
          <p>モーダルの中身</p>
          <p>モーダルの中身</p>
          <p>モーダルの中身</p>
        </div>
        <div class="modal-footer">
          <button type="button" v-on:click="show=false" class="btn btn-primary">クリックすると閉じるボタン</button>
        </div>
      </div>
    </div>
  </div>
</transition>

show が true になればfadein、showがfalseになればfadeoutする。