目前为止,关于过渡我们已经讲到:
- 单个节点
- 同一时间渲染多个节点中的一个
那么怎么同时渲染整个列表,比如使用 v-for
?在这种场景中,使用 <transition-group>
组件。在我们深入例子之前,先了解关于这个组件的几个特点:
- 不同于
<transition>
,它会以一个真实元素呈现:默认为一个<span>
。你也可以通过tag
特性更换为其他元素。 - 过渡模式不可用,因为我们不再相互切换特有的元素。
- 内部元素 总是需要 提供唯一的
key
属性值。
CSS
- .v-enter, .v-leave-to{
- opacity:0;
- }
- .v-enter-active, .v-leave-active{
- transition: opacity 3s;
- }
- .v-move {
- transition: transform 1s;
- }
<transition-group>
组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 v-move
特性,它会在元素的改变定位的过程中应用。像之前的类名一样,可以通过 name
属性来自定义前缀,也可以通过 move-class
属性手动设置。
本文没有通过name
属性来定义前缀,所以样式前缀都为v-
HTML
- <button @click="add">add</button>
- <button @click="remove">remove</button>
- <button @click="shuffle">shuffle</button>
- <transition-group tag="ul">
- <p v-for="item in list" :key="item.id">{{item.id}} -- {{item.name}}</p>
- </transition-group>
不同于transition
,它会以一个真实元素呈现:默认打开P标签
被包裹在span标签
内。我们也可以通过tag
特性更换为其他元素。这里我们通过tag="ul"
,将p标签以及内容包裹在了ul里面。
JS
- var count = 1;
- var num = 1;
- var vm = new Vue({
- el: '#root',
- data: {
- list: []
- },
- methods: {
- add: function () {
- this.list.push({
- id:count++,
- name:'我是第' + num++ +'行!'
- })
- },
- remove: function () {
- this.list.splice(0,1)
- },
- shuffle: function () {
- this.list = _.shuffle(this.list)
- }
- }
- })
shuffle是用到lodash库中的一个方法,作用是打乱list集合并返回打乱的新数组。
效果
微信小程序
互联网开发,终身学习者,欢迎您的关注!