vue中列表增删时的动画过渡效果

最新推荐文章于 2023-02-10 17:10:49 发布

叨唠

最新推荐文章于 2023-02-10 17:10:49 发布

阅读量687

点赞数

分类专栏： Vue 文章标签： vue 列表项的增删过渡

本文链接：https://blog.csdn.net/zyz00000000/article/details/84316793

版权

Vue 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

用transition-group 包裹标签，注意没有name属性，要使用v-enter等类

  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0
    }
    .v-enter-active,
    .v-leave-active {
      transition: opacity 2s
    }
  </style>
</head>

<body>
  <div id="demo">
    <button @click="handleClick">add item</button>
    <transition-group>
      <div v-for="item of lists" :key="item.id">{{item.id}}、{{item.title}}</div>
    </transition-group>
  </div>
  <script>

    new Vue({
      el: '#demo',
      data: {
        count: 0,
        lists: []
      },
      methods:{
        handleClick () {
           this.lists.push({
             id: this.count++,
             title: 'new add item'
           })
        }
      }
    })
  </script>

结果：添加新的内容时，是过渡效果添加上去的

原理：每增加一项的时候，其实就是增加了一个transition标签包裹该项的标签。

    <transition>
      <div>{{item.id}}、{{item.title}}</div>
    </transition>
    <transition>
      <div>{{item.id}}、{{item.title}}</div>
    </transition>
    <transition>
      <div>{{item.id}}、{{item.title}}</div>
    </transition>
    <transition>
      <div>{{item.id}}、{{item.title}}</div>
    </transition>

所以：不能再transition-group标签上写name属性，不然name属性都一样了。

叨唠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
vue中列表增删时的动画过渡效果

用transition-group 包裹标签，注意没有name属性，要使用v-enter等类 &lt;style&gt; .v-enter, .v-leave-to { opacity: 0 } .v-enter-active, .v-leave-active { transition: opacity 2s } ...
复制链接

扫一扫