Vue.js　トランジション

前回の記事はこちら
Vue.js　コンポーネント

トランジションの基礎

トランジションを使ってp要素をクリックすると
フェードイン/アウトしながら表示/非表示を切り替えてみましょう。
jsfiddleで実際に記述しながら読むことをおすすめします。

index/html

<div id="app">

<button v-on:click="show=!show">change</button>
<p v-show="show">Hello Transition</p>


</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

index.js

var app = new Vue({
  el:'#app',
  data:{
    show:""
  }
})

実行結果

トランジション効果なしで表示/非表示を切り替えることができています。

まずトランジション効果を設定したい要素（今回はPタグ）をtransitionタグで囲みます。

index/html

<div id="app">

<button v-on:click="show=!show">change</button>

<transition>
<p v-show="show">Hello Transition</p>
</transition>

</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

v-ifでDOM要素を追加もしくはv-showで表示した場合
enterという文字列を含んだクラスがトランジションクラスとして要素に追加されます。
下記がイメージです

<p class= "v-enter-active v-enter-to">
  Hello Transition
</p>

このクラス名にCSSを設定します。
５秒かけて表示するにはCSSに以下を記述します。

index.css

/* ５秒かけて表示される　display-noneが外れた時の処理*/
.v-enter-active{
  transition: opacity 5s;
} 

.v-enter{
  opacity: 0;
}

実行結果

DOMの動き

このときDOMでは５秒かけてv-enter-active v-enter-toが設定され
５秒後にはどちらも消えます。

v-ifでDOM要素を削除もしくはv-showで非表示にした場合
leaveという文字列を含んだクラスがトランジションクラスとして要素に追加されます。
下記がイメージです

<p class= "v-leave-active v-leave-to">
  Hello Transition
</p>

非表示の際のCSSを追記します。以下が完成形です。

index/html

<div id="app">

<button v-on:click="show=!show">change</button>

<transition>
  <p v-show="show">Hello Transition</p>
</transition>

</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

index.js

var app = new Vue({
  el:'#app',
  data:{
    show:""
  }
})

index.css

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

.v-enter , .v-leave-to{
  opacity: 0;
}

実行結果

DOMの動き

次回はVue.Routerについてです。