VueJs初学者のちょっとした倉庫です。簡単だけどシンプルだけど使えそうな表現を目指しています。
クリックでリストがゆっくり入れ替わる
←気が向いたらLGTMボタンぽちっとお願いします。
ボタン押下でリストのゆっくりと順番が変わり、上位3つの要素にcssが適用されます。
ひと段落まで作ったところでVueJsの公式のサンプルで似たようなものがあることに気が付いた。
ソース
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>shuffle</title><style>/*要素が並び変えにかかる時間*/.flip-list-move{transition:transform1.5s;}ul{margin-left:800px;list-style:none;}div#mainlist{color:#8EF1FF;font-size:15px;}div#mainlistulli:first-child{list-style-type:"1:";color:#7B3CFF;font-size:75px;}div#mainlistulli:nth-child(2){list-style-type:"2:";color:#B384FF;font-size:50px;}div#mainlistulli:nth-child(3){list-style-type:"3:";color:#EAD9FF;font-size:25px;}.btn-border-bottom{margin-left:750px;position:relative;display:inline-block;font-weight:bold;padding:0.25em0;text-decoration:none;color:#67c5ff;}.btn-border-bottom:before{position:absolute;content:'';width:100%;height:4px;top:100%;left:0;border-radius:3px;background:#67c5ff;transition:.2s;}.btn-border-bottom:hover:before{top:-webkit-calc(100%-3px);top:calc(100%-3px);}</style></head><body><divid="app"><h1><divclass="backGround"><divclass="btn-border-bottom"v-on:click="shuffle">あなたにお勧めの犬種は？？</div><divid="mainlist"><transition-groupname="flip-list"tag="ul"><liv-for="dog in dogs":key="dog.name"><p>
{{dog.name}}
</p></li></transition-group></div></ul></div></h1></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:{error:"error",dogs:[{name:'チワワ'},{name:'トイプードル'},{name:'ポメラニアン'},{name:'柴犬'},{name:'ダックスフンド'},{name:'パグ'},{name:'ブルドック'},{name:'コーギー'},{name:'パピヨン'},{name:'マルチーズ'},]},methods:{shuffle:function(e){this.dogs=_.shuffle(this.dogs);}}});</script></body></html>最後に
以上です。気が向いたらLGTMぽちっとお願いします。