Vue中的列表过渡

2019年3月20日09:04:23 发表评论 阅读(1,674)

Vue中的列表过渡

目前为止,关于过渡我们已经讲到:

  • 单个节点
  • 同一时间渲染多个节点中的一个

那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group> 组件。在我们深入例子之前,先了解关于这个组件的几个特点:

  • 不同于 <transition>,它会以一个真实元素呈现:默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
  • 过渡模式不可用,因为我们不再相互切换特有的元素。
  • 内部元素 总是需要 提供唯一的 key 属性值。

CSS

  1. .v-enter, .v-leave-to{
  2.     opacity:0;
  3. }
  4. .v-enter-active, .v-leave-active{
  5.     transition: opacity 3s;
  6. }
  7. .v-move {
  8.     transition: transform 1s;
  9. }

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性,它会在元素的改变定位的过程中应用。像之前的类名一样,可以通过 name 属性来自定义前缀,也可以通过 move-class 属性手动设置。

本文没有通过name属性来定义前缀,所以样式前缀都为v-

HTML

  1. <button @click="add">add</button>
  2. <button @click="remove">remove</button>
  3. <button @click="shuffle">shuffle</button>
  4. <transition-group tag="ul">
  5.         <p v-for="item in list" :key="item.id">{{item.id}} -- {{item.name}}</p>
  6. </transition-group>

不同于transition,它会以一个真实元素呈现:默认打开P标签被包裹在span标签内。我们也可以通过tag特性更换为其他元素。这里我们通过tag="ul",将p标签以及内容包裹在了ul里面。

JS

  1. var count = 1;
  2. var num = 1;
  3. var vm = new Vue({
  4.     el: '#root',
  5.     data: {
  6.         list: []
  7.     },
  8.     methods: {
  9.         add: function () {
  10.             this.list.push({
  11.                 id:count++,
  12.                 name:'我是第' + num++ +'行!'
  13.             })
  14.         },
  15.         remove: function () {
  16.             this.list.splice(0,1)
  17.         },
  18.         shuffle: function () {
  19.             this.list = _.shuffle(this.list)
  20.         }
  21.     }
  22. })

shuffle是用到lodash库中的一个方法,作用是打乱list集合并返回打乱的新数组。

效果

点我查看

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛