Vue.js(トランジション)(Laravel使用)
トランジション参考記事・トランジションチュートリアルを参考にさせていただき、進めさせていただきます。
◆トランジション
Vue.jsでは、transitionタグで囲んで、cssでちょっと設定するだけで、移動などのcssトランジションを簡単にセットできます。
<style>
.v-enter-active, .v-leave-active{
transition: opacity 1s;
}
.v-enter, .v-leave-to {
opacity: 0;
}
</style>
<body>
<div id="sample">
<button @click="click">表示切替</button>
<transition>
<h1 v-show="show">
Hello World!!
</h1>
</transition>
</div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script>
const vue = new Vue({
el: '#sample',
data:{
show:true
},
methods:{
click(){
this.show = !this.show;
}
}
})
</script>
.v-enter-active, .v-leave-activeをcssで指定しておりますが、transitionタグで囲んだ範囲のDOMが挿入されるときがenterとなっており、消えるときがleaveとなっております。
enterとleaveそれぞれv-○○・v-○○-to・v-○○-activeがありますが、enterの場合で説明させていただきますと、
・v-enterは、DOMに挿入される前
・v-enter-toは、DOMに挿入された後
・v-enter-activeは、v-enterからv-enter-toまで
leaveはDOMに挿入された後から、削除されるまでで考えてほしい。
今回でいうと、v-enter-active, .v-leave-activeはDOMに挿入される前からされた後までを1秒かけて、透過度を変化させるためであり、.v-enter, .v-leave-toはDOMに挿入される前とDOMから削除された後は、透過度0と指定してます。
v-で始まるのはデフォルトがそうなっているためであって、transitionタグにname属性をつけることで変更できます。
◆複数グループ化
transitionタグでは、独立したノードという決まりなのでv-forなどを使うときに困ります。そんな時はtransion-groupタグを使用して、解決できます。それでは、表示されている配列をシャッフルするときにアニメーションを働かしてみます。
<style>
.fruits-list-move {
transition: transform 1s;
}
</style>
<body>
<div id="sample">
<button @click="shuffle">シャッフル</button>
<transition-group name="fruits-list">
<li v-for="(fruit, index) in fruitsList" :key="fruit">
@{{ fruit }}
</li>
</transition-group>
</div>
</body>
<script src=" {{ asset('js/app.js') }} "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<script>
const vue = new Vue({
el: '#sample',
data:{
fruitsList: ['りんご', 'みかん', 'めろん', 'ぶどう']
},
methods:{
shuffle(){
this.fruitsList = _.shuffle(this.fruitsList);
}
}
})
</script>
key属性を持つことは必須なのですが、indexを指定するとタイムラグの関係かアニメーションがうまくいきませんのでfruitsを設定させていただきました。今回は_.shuffleを使いたいため、CDNでlodash(便利関数の詰まったライブラリ)を利用させていただきます。
nameでtransition-groupを指定しましたので、それをcssで指定しています。今回使用しているのはv-move(アイテムの位置が変更されたときに働いてくれる)を使用しました。
◆トランジションフック
transionタグにイベントフックを仕込むことで、cssのアニメーションと連動できる
参考記事
Author And Source
この問題について(Vue.js(トランジション)(Laravel使用)), 我々は、より多くの情報をここで見つけました https://qiita.com/shibaHaya/items/5acf9cc4872df2967324著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .