<head>
<meta charset="utf-8">
<title>vue</title>
<link rel="stylesheet" href="css/styles.css">
<!--これはアニメーションのために必要-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
</head>
<body>
<script src="https://unpkg.com/vue@2.5.17"></script>
<div id="app">
<pull-down-menu></pull-down-menu>
</div>
<script src="js/main.js"></script>
</body>
cssは好きに書いてね
Vue.js
var fff = {
data: function () {
return {
isShown: false,
name: 'カーソル',
items: [
'1-1',
'1-2',
'1-3',
]
};
},
template: `
<div @mouseleave="isShown = false">
<p @mouseover="isShown = true"><a href="#" class="menu">{{ name }}</a></p>
//イベントに対するイベントリスナーは
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
//isShownの時にリストが出現
<ul v-if="isShown">
<li v-for="item in items" :key="item">
<a href="#" class="menu-item">{{ item }}</a>
</li>
</ul>
</transition>
</div>
`,
methods: {
//トランジションの対象となるDOM要素:el
//初期状態
beforeEnter: function(el) {
el.style.height = '0px';
el.style.opacity = '0';
},
enter: function(el,done) {
// 3秒かけて、透明度と高さを変更して出現させる
//はじめ
anime({
targets: el,
opacity: 1,
height: el.scrollHeight + 'px',
duration: 10000,
complete: done
});
},
leave: function(el,done) {
//終わり
anime({
targets: el,
opacity: 0,
height: '0px',
duration: 10000,
complete: done
});
}
},
};
new Vue({
el: '#app',
components: {
PullDownMenu: fff
}
});