Vue前端开发之transition-group列表动画

动画不仅可以作用于一个节点或一个组件上，而且还可以作用于多个节点和组件中，例如：当列表中的项目在增加或删除时，希望通过动画的效果来实现，这种动画则需要添加列表动画组件transition-group来完成。

transition-group是新增的一个动画组件，它可以在多个元素中应用动画，具有以下特征：

• 默认情况下，它不会渲染组件包裹中某个元素，除非单独指定某一个元素。

• 过渡的模式不可使用，因为它不再相互切换元素的特有效果。

• 元素内部需要提供唯一的属性key值，用于标识动画作用的是哪个元素。

• CSS 过渡样式仅作用于包裹的内部元素，不会应用于动画组件本身。

transition-group组件不仅可以在列表中实现基础的动画效果，还可以在列表中实现交错过渡的效果

ransition-group组件基本功能

transition-group组件可以针对多项元素实现动画的效果，它的动画样式设置方式和动画的生命周期函数与transition组件是一样式的，接下来通过一个简单的示例来演示它的基本使用过程。

实例5-6 列表中的动画数字

1. 功能描述

在页面模板中，分别添加一个“增加”和“删除”按钮，再添加一个列表元素，默认列表中显示10个数字，当点击“增加”按钮时，列表中以渐现的动画形式，添加一个数字;当点击“删除”按钮时，列表中以渐隐的动画形式，删除一个数字。

2. 实现代码

在项目components 文件夹的ch5子文件夹中，添加一个名为“TransGroup”的.vue文件，在文件中加入如清单5-6所示代码。

代码清单5-6 TransGroup.vue代码

<template>
  <div class="action">
    <div class="act">
      <input type="button" @click="add()" value="增加" />
      <input type="button" @click="remove()" value="删除" />
    </div>
    <transition-group name="fade" tag="ul">
      <li v-for="item in list" :key="item">
        {{ item }}
      </li>
    </transition-group>
  </div>
</template>
 
<script>
export default {
  name: "TransGroup",
  data() {
    return {
      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    };
  },
  methods: {
    add() {
      this.list.push(this.getRndIndex())
    },
    remove() {
      this.list.splice(this.getRndIndex(), 1)
    },
    getRndIndex() {
      let len = this.list.length;
      return Math.floor(Math.random() * len);
    }
  }
};
</script>
<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-right: 10px;
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  font-family: '微软雅黑'
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.action .act {
  margin: 10px 0;
}

.action .act input {
  width: 80px;
  height: 32px;
  margin-right: 5px;
}
</style>

3. 页面效果

保存代码后，页面在Chrome浏览器下执行的页面效果如图5-7所示。

4. 源码分析

在上述示例模板代码中，首先，向transition-group组件添加了一个名称为“tag”的属性，该属性表示以什么元素名称包裹动画列表元素，一旦完成设置，则transition-group组件在编译时自动转成该元素名称，所有的动画效果都由该元素包裹的列表去实现。

其次，需要注意的是，包裹元素不建议使用flex 方式进行布局，因为 flex 布局有它特有的渲染方式，而这种特有的方式会导致列表动画在执行过程中出现问题。

原文地址：https://blog.csdn.net/chuanshixx/article/details/143712770

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！