必要なのか?と思いながらも
Vue.jsの高度な機能って何?的な感じなんだけど、ここでは「トランジションアニメーション」のサンプルが紹介されている。
普通に使う機能になってきているんだよね。
でも、まぁサンプルがね・・・長い。
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: Kindle版
- この商品を含むブログを見る
ファイルで作成したのだけど
jsfiddleでコードが紹介されているのだけど、ファイルに書いてみたのだ。
ここでは
Anime.js
の設定してないんだよね。
どうしてるんだろう?
それでも動くのなんでだ?
ってことでファイルで展開してみた。もちろん、ちゃんと入力した。
index.html
<!DOCTYPE html> <title>サンプル</title> <link rel="stylesheet" href="./style.css"></link> <!-- ↓これ必要 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script> <script src="https://unpkg.com/vue@2.5.17"></script> <div id="app"> <pull-down-menu></pull-down-menu> </div> <script src="app.js"></script>
app.js
var PullDownMenu = { 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" :css="false" > <ul v-if="isShown"> <li v-for="item in items" :key="item"> <a href="#" class="menu-item">{{ item }}</a> </li> </ul> </transition> </div> `, methods: { 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: 3000, complete: done }) }, leave: function(el, done) { anime({ targets: el, opacity: 0, height: '0px', duration: 300, complete: done }) } } } new Vue({ el: '#app', components: { PullDownMenu: PullDownMenu } })
ここで質問なのは、本では全部、セミコロン(;)
がないのだ。
でも、動くんだけど。これはこれでいいのか?
ググってみた。
セミコロンやカンマの使用の是非はどちらでも良いです。
なんだって。そうなんだ。
style.css
div, ul, li, a, p { margin: 0; padding: 0; } ul { list-style-type: none; margin: 0; padding: 0; font-size: 14px; } div { width: 90px; } .menu { width: 90px; text-decoration: none; background-color: #9999ff; color: #000; border: solid 1px #6666cc; display: block; height: 30px; line-height: 30px; text-align: center; } .menu-item { width: 90px; text-decoration: none; background-color: #ccccff; color: #000; border: solid 1px #6666cc; border-top: none; display: block; height: 30px; line-height: 30px; text-align: center; }
入力しているだけだけど、「あぁこんな機能があるんだ」は確実に蓄積しているはずなんだけど。