VueJs初学者のちょっとした倉庫です。簡単だけどシンプルだけど使えそうな表現を目指しています。
マウスオーバーで画像がゆっくり表示される
←気が向いたらLGTMボタンぽちっとお願いします。
カーソルが要素に重なると拡大され、要素の値を取得します。
ポケモン図鑑作るならVue.js？
ソース
shuffle.html
<!doctype html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>PickUp</title><style scoped>.fade-enter-active,fade-leave-active{transition:opacity3s;}.fade-enter,.fade-leave-to{opacity:0}div{display:inline-block;}body{font-family:"Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;}ul{margin-left:00px;list-style:none;}div#mainlist{color:#8EF1FF;font-size:25px;}div#mainlistulli:hover{list-style-type:"> ";color:#7B3CFF;font-size:75px;}.SubTitle{margin-left:600px;position:relative;display:inline-block;font-weight:bold;padding:0.25em0;text-decoration:none;color:#67c5ff;}.SubTitle:before{position:absolute;content:'';width:100%;height:4px;top:100%;left:0;border-radius:3px;background:#67c5ff;transition:.2s;}.SubTitle:hover:before{top:-webkit-calc(100%-3px);top:calc(100%-3px);}</style></head><body><divid="app"><div><h1><divid="mainlist"><ul><div><spanclass="SubTitle">あなたの好きな犬種は？？</span><liv-for="dog in dogs":key="dog.name"@mouseover="activeDog=dog.id">
{{dog.name}}
</li></div><div><transitionname="fade"><imgv-show="this.activeDog==1"src="tiwawa.png"></img></transition></div></ul></div></h1></div><pv-show="activeDog">selected:{{activeDog}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script><script>varapp=newVue({el:"#app",data:{dogs:[{id:1,name:'チワワ'},{id:2,name:'トイプードル'},{id:3,name:'ポメラニアン'},{id:4,name:'柴犬'},{id:5,name:'ダックスフンド'},{id:6,name:'パグ'},{id:7,name:'ブルドック'},{id:8,name:'コーギー'},{id:9,name:'パピヨン'},{id:10,name:'マルチーズ'},{id:11,name:'シェパード'},{id:12,name:'ラブラドール'},{id:13,name:'ビーグル'},{id:14,name:'ゴールデンレトリバー'},{id:15,name:'秋田犬'},],activeDog:0,},methods:{}});</script></body></html>最後に
以上です。気が向いたらLGTMぽちっとお願いします。