Vue ＜transition-group＞列表的添加/删除元素过渡案例2

最新推荐文章于 2022-06-01 23:41:39 发布

zbailing

最新推荐文章于 2022-06-01 23:41:39 发布

阅读量226

点赞数

分类专栏： Vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/zbailing/article/details/123210672

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

这个示例展示了如何在 Vue 中使用 `<transition-group>` 组件实现列表元素的添加和删除过渡动画。通过点击按钮，动态添加和删除列表项，同时应用淡入淡出的效果。过渡动画通过 CSS 样式控制，包括进入和离开时的透明度和位置变化。

摘要由CSDN通过智能技术生成

<!-- Vue <transition-group> 列表的 添加/删除元素 过渡案例2 -->
<template>
  <div class="page">
    <transition-group name="fade" tag="ul">
      <li v-for="(item,index) in items" :key="item.id" class="list-item">
        <span>{{item.txt}}-{{item.id}}</span>
        <button @click="addRow">add</button>
        <button @click="deleteRow(index)">delete</button>
      </li>
    </transition-group>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        items: [
          {id: 0, txt: '内容'},
          {id: 1, txt: '内容'},
          {id: 2, txt: '内容'}
        ],
      }
    },
    computed: {
      num: {
        /*
        * 计算属性默认只有getter，不过如果有需要也可以提供一个setter，写法如下：
        * */
        get() {
          return this.items.length
        },
        set(newValue) {
          console.log(newValue);
        }
      }
    },
    methods: {
      addRow() {
        // 如果计算属性num不设置setter，++this.num会报错，无法赋值
        this.items.splice(this.items.length, 0, {id: ++this.num, txt: '内容'})
      },
      deleteRow(id) {
        this.items.splice(id, 1)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .list-item {
    margin-bottom: 10px;

    button {
      margin-left: 8px;
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: all 0.5s;
  }
  .fade-enter {
    opacity: 0;
    transform: translateY(30px);
  }
  .fade-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
</style>