基礎からメモ： Vue.js CH1-p42 トランジション＆アニメーション

Vue.js

組み込みコンポーネントの<transition>を使えば、CSSトランジションやアニメーションを簡単に適用できる。

[index06.html]

<div id="app">
    <button v-on:click="show=!show">切り替え</button>
    <transition>
      <p v-if="show">{{ message }}</p>
    </transition>
</div>

[main06.js]

var app = new Vue({
  el: '#app',
  data: {
    show: true,
    message: "Hello Vue.js"
  }
})

ボタンをクリックするとapp.showの真偽値が入れ替わる。このままでは、ボタンを押しても画面に表示された Hello Vue.js! が単純に消えるだけだ。 そこでCSSで次の定義を行う。

[main.css]

.v-enter-active, .v-leave-active {
  transition: opacity 2s;
}

/* opacity:0から1へのフェードイン＆フェードアウト */
.v-enter, .v-leave-to {
  opacity: 0;
}

これでボタンを押した時の表示と非表示の入れ替わりが、ジワッとした動きになる。