列表過(guò)渡
實(shí)現(xiàn)
使用 <transition-group> 組件.
它會(huì)以一個(gè)真實(shí)元素呈現(xiàn)：默認(rèn)為一個(gè) <span>浩螺。你也可以通過(guò) tag 特性更換為其他元素。
內(nèi)部元素 總是需要 提供唯一的 key 屬性值
列表的進(jìn)出過(guò)渡
<!--內(nèi)容-->
<div id="list-demo" class="demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
</div>
//腳本
new Vue({
el: '#list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
}
})
//樣式
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
列表的排序過(guò)渡
解決
v-move特性實(shí)現(xiàn)改變定位;
name 屬性來(lái)自定義前綴;
也可以通過(guò) move-class 屬性手動(dòng)設(shè)置七蜘。
示例
<!--內(nèi)容-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="flip-list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
</div>
//腳本
new Vue({
el: '#flip-list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9]
},
methods: {
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
//樣式
.flip-list-move {
transition: transform 1s;
}
列表的交錯(cuò)過(guò)渡
