はじめに
三ヶ月近く触っているとVue.jsに慣れ始めてきました。進捗は相変わらず遅いですが、、、
そんなわけで以前から作れるようになりたいと思っていたメニューバーを作成していきたいと思います。
動作
完成コード
htmlファイルにコピペしてもらえば動くはずですので是非試してみてください。
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>MENU BAR</title>
</head>
<body>
<div id="app">
<nav class="entireMenuBar">
<ul>
<div class="parentMenuBar1">
<li @click="{menuToggle1 = !menuToggle1,menuToggle2 = false}">親要素1</li>
<transition>
<div class="childMenuBar2" v-show="menuToggle1">
<ul>
<li>子要素1-1</li>
<li>子要素1-2</li>
<li>子要素1-3</li>
</ul>
</div>
</transition>
</div>
</ul>
<ul>
<div class="parentMenuBar2">
<li @click="{menuToggle2 = !menuToggle2,menuToggle1 = false}">親要素2</li>
<transition>
<div class="childMenuBar2" v-show="menuToggle2">
<ul>
<li>子要素2-1</li>
<li>子要素2-2</li>
<li>子要素2-3</li>
</ul>
</div>
</transition>
</div>
</ul>
</nav>
<div id="main" @click="{menuToggle2 = false ,menuToggle1 = false}">
<br><br><br><br><br><br>
<pre>{{ $data }}</pre>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
data:{
menuToggle1:false,
menuToggle2:false,
}
}).$mount('#app')
</script>
</body>
<style media="screen">
.childMenuBar1,.childMenuBar2{
position:relative;
margin-top:6px;
border-radius:2px;
background-color:lightblue;
z-index:-1;
}
body{
margin:0;
padding:0;
background-color:lightgray;
}
ul{
list-style:none;
padding:0;
margin:0;
}
li{
margin:0;
cursor:pointer;
}
.entireMenuBar{
background-color: #eee;
padding:5px;
display:flex;
height:30px;
}
.parentMenuBar1,.parentMenuBar2{
width:80px;
padding:5px;
margin:0px 0px 0px 20px;
border-radius:5px;
}
#main{
height:100%;
}
.v-enter-active,.v-leave-active{
transition: transform .2s ease-out;
}
.v-enter,.v-leave-to {
transform: translateY(-90px);
}
</style>
</html>
トランジションに注目
以下のように書くことでCSSでアニメーションを設定するように要素を動かすことができます。
index.html
.v-enter-active,.v-leave-active{
transition: transform .2s ease-out;
}
.v-enter,.v-leave-to {
transform: translateY(-90px);
}
.v-enter-active,.v-leave-active
の中で動きの種類とそれにかける時間を指定しています。
.v-enter,.v-leave-to
の中で動きの開始時と終了時の状態を指定しています。
動きの流れ的には、、、
アニメーション開始時
1,v-enter
2,v-enter-active
アニメーション終了時
3,v-leave-active
4,v-leave-to
といった流れです。
そしてこの動きをつけたい要素を
<transition>動きをつけたい要素</transition>
のようにトランジションタグで囲んであげれば
動画のような動きをしてくれる要素の完成です。
以上です。最後までお読みいただきありがとうございました。