Vue.js トランジション
前回の記事はこちら
Vue.js コンポーネント
トランジションの基礎
トランジションを使ってp要素をクリックすると
フェードイン/アウトしながら表示/非表示を切り替えてみましょう。
jsfiddleで実際に記述しながら読むことをおすすめします。
index/html
<divid="app"><buttonv-on:click="show=!show">change</button><pv-show="show">Hello Transition</p></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>index.js
varapp=newVue({el:'#app',data:{show:""}})実行結果
トランジション効果なしで表示/非表示を切り替えることができています。
まずトランジション効果を設定したい要素（今回はPタグ）をtransitionタグで囲みます。
index/html
<divid="app"><buttonv-on:click="show=!show">change</button><transition><pv-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という文字列を含んだクラスがトランジションクラスとして要素に追加されます。
下記がイメージです
<pclass= "v-enter-active v-enter-to">
Hello Transition
</p>このクラス名にCSSを設定します。
５秒かけて表示するにはCSSに以下を記述します。
index.css
/* ５秒かけて表示される display-noneが外れた時の処理*/.v-enter-active{transition:opacity5s;}.v-enter{opacity:0;}実行結果
DOMの動き
このときDOMでは５秒かけてv-enter-active v-enter-toが設定され
５秒後にはどちらも消えます。
v-ifでDOM要素を削除もしくはv-showで非表示にした場合
leaveという文字列を含んだクラスがトランジションクラスとして要素に追加されます。
下記がイメージです
<pclass= "v-leave-active v-leave-to">
Hello Transition
</p>非表示の際のCSSを追記します。以下が完成形です。
index/html
<divid="app"><buttonv-on:click="show=!show">change</button><transition><pv-show="show">Hello Transition</p></transition></div><script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>index.js
varapp=newVue({el:'#app',data:{show:""}})index.css
.v-enter-active,.v-leave-active{transition:opacity5s;}.v-enter,.v-leave-to{opacity:0;}実行結果
DOMの動き
次回はVue.Routerについてです。
