Vue.js>Vue.jsで、スライドメニューを作る

Vue.jsで、スライドメニューを作る

2018年8月17日

最近Vue.jsを勉強し始めました。

対してjQueryも使いこなせないんですが、Vue.jsってjQueryより使いやすいんじゃね?と思ってしまうほどにハマってしまいました。

というわけで、Vue.jsでサイドメニューを表示させます。

 

jQueryみたいにクリックした時に、この要素にクラスを付与するみたいなロジックを書かずとも動作してしまうのが良いですね

Vue.jsでサイドメニューを作る

とりあえず作ったのはこんな感じです

デモページ

早速HTMLを書いていきます。HTMLファイルにjsを書いていきます。

 

Vue.jsを使うのに特別な操作は必要なく、<script src=”https://cdn.jsdelivr.net/npm/vue”></script>という感じで読み込めます。

今回のターゲットは<div id=”navmenu”>ですのでel:’#navmenu’,という感じで指定します。
jQueryで言えば$(‘#navmenu’)という感じでしょうか、ここをelで指定します。

ボタンにはクリックイベントを付与しています。関数を実行させることもできますし、その場で簡単なロジックを書くこともできます。

<button v-on:click=”on = !on” v-if=”!on”>メニューを表示</button>
<button v-on:click=”fire” v-if=”on”>メニューを閉じる</button>

v-on:clickと書いていますが、他にもアクションはたくさんあるようです
参考:イベントハンドリング

v-ifは条件付きレンダリングと呼ばれていて、真の時に表示されます。
なのでonの時と!onの時で表示するボタンを切り替えています。

v-elseなんてのも使えるようです
参考:条件付きレンダリング

ここまでくるとどういうタイミングでメニューを表示するのか?まで完成できました。

トランジションを使う

これだけでは面白くないのでアニメーション効果をつけます。

transitionというコンポーネントを使うことで、v-ifにトランジション効果をつけることができます。

そのためメニュー部分は<transition name=”show”>というブロックで囲っています。

 

実はこれだけでいいのです。あとはcssを書くだけでアニメーションは動作します。
というのも、トランジションクラスが自動的に付与されるので、その名前に従ってcssを書いていけばいいだけ!

 

今回はtransitionにshowという名前をつけました。
するとcssもshow-という名前がつけられます。

指定がないと、v-という名前になります。

この辺のアニメーションの状態に関しては
Vue.js でたのしいトランジション 通常編
を見ると詳しくわかります。

 

今回の例では
メニューを開く時にクラス名はこんな感じになる。

<div class=”sidemenu show-enter-active show-enter-to”><ul><li><a href=”#”>Home</a></li> <li><a href=”#”>About</a></li> <li><a href=”#”>Team</a></li> <li><a href=”#”>Work</a></li> <li><a href=”#”>Contact</a></li></ul></div>

逆にメニューを閉じる時はこんな感じ

<div class=”sidemenu show-leave-active show-leave-to”><ul><li><a href=”#”>Home</a></li> <li><a href=”#”>About</a></li> <li><a href=”#”>Team</a></li> <li><a href=”#”>Work</a></li> <li><a href=”#”>Contact</a></li></ul></div>

ちなみにこれらは、勝手に付与されて勝手に消えていきます。
最終的には

<div class=”sidemenu”><ul><li><a href=”#”>Home</a></li> <li><a href=”#”>About</a></li> <li><a href=”#”>Team</a></li> <li><a href=”#”>Work</a></li> <li><a href=”#”>Contact</a></li></ul></div>

こんな感じになります。

 

表示される時にまず、show-enterクラスが付与されて、すぐに消えます。
この時にopacityを0にしておけば、あとは.5sかけて変化していきますということですな

 

例えばこんな風にすると

右端から飛び出してくるスライドメニューが簡単に作れますな