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

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

叨唠

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

阅读量703

点赞数

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

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

版权

用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>

结果：添加新的内容时，是