Vue.js

「ハンバーガーボタンを作ろう」より

ここではクラスバインディングを使っています。クラスバインディングとはHTML要素のclass属性にデーターをバインディングする機能のことです。

クリックすると開閉 | Click to open and close

クラスバインディングの書き方

HTML側の書き方については、v-bind:classをタグに記載します。短縮系で:classと書くこともできます。

以下のようにオブジェクトを作り、左側にバインディングするclass名を書き、右側にそのクラスを付与する条件式を書きます。

短縮形

HTML

クラスバインディングと、@clickによるイベントハンドリング機能をもったハンバーガーボタンの要素を用意します。

普通のclassとv-bind:classでバインディングしたclassは共存可能です。

メニューが表示状態になったときにis-activeのスタイルも適用されるようにします。

Javascript

new Vue({
el: '#app',
data() {
return {
isActive: false
};
},
methods: {
toggleButton() {
this.isActive = !this.isActive;
}
}
});

ハンバーガーボタン開閉用のプロパティのisActiveとそれを制御する toggleButtonメソッドを用意します。

toggleButtonの中で「this.isActive = !this.isActive」とありますが、これは、this.isActiveの状態（true.false）を反転して設定し直す処理です。

つまり、 this.isActiveがfalseのときはtrueが代入され、trueのときはfalseが代入されます。これにより、ハンバーガーボタンが閉じた状態(=)なのか、開いた状態(X)なのかを表現することができます。

CSS

.btn-humburger {
width: 57px;
height: 57px;
background: transparent;
position: relative;
}

.btn-humburger > div {
position: absolute;
width: 58px;
height: 5px;
transition: all 0.2s;
background-color: #000;
}

.btn-humburger > div:first-child {
top:15px;
left: 0;
}

.btn-humburger > div:last-child {
bottom: 15px;
left: 0;
}

.btn-humburger.is-active > div:first-child {
-webkit-transform: translateY(11px) rotate(45deg);
transform: translateY(11px) rotate(45deg);
}

.btn-humburger.is-active > div:last-child {
-webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}

ここでは is-activeが付与されていないときと、付与されたときのスタイルを用意します。そしてJavascript側でis-activeの付与をコントロールしていきます。

.btn-humburger { ～では閉じている状態で適用されるスタイルを書いています。

.btn-humburger > div { ～ではハンバーガーボタンの黒い線を書いています。その中にtransition: all 0.2s;という記述がありますが、これはis-activeクラスが付いたときと外れた時にアニメーション効果をつけるプロパティです。変化の始まりから終わりまでの時間を0.2秒としています。

.btn-humburger > div:first-child {～と.btn-humburger > div:last-child {～はそれぞれ最初のdivと最後のdivを指定しています

.btn-humburger.is-active > div:first-child {～と .btn-humburger.is-active > div:last-child {～ではis-activeクラスが付与されることでスタイルが適用されます。transformプロパティによって各divの傾きを変えて✖の形を作っています。

webkitの記述はベンダーブレフィックスと呼ばれ、CSS3で実装予定の機能をブラウザ各社が専攻して実装した機能を各ブラウザで使えるようにしたもの。webkitはベンダーブレフィックスの中でもchromeやsafariに対応する。ブラウザは日々アップデートされているので、特に記述を必ずしなければならないという流れではない。

この本から引用、参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。私は買っておいてよかったです。

やっぱり自分はプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー