利用transition-group做动画数据新增时的动画显示效果

transition-group是表示的一组动画，一般常配合v-for动态渲染使用
注意点：多个动画列表过渡时，必须设置key值! 并且key值不能用index，要用id
代码示例：

<div class="output-information-content">
	<transition-group>
	// :class="controlObj.exportList.length % 2 === 0 ? index % 2 === 0 ? 'output-information-item-bg' : '' : index % 2 === 0 ? '' : 'output-information-item-bg'" 作用是加个背景色
		<div class="output-information-item" v-for="item in exportList" :key="item.id" :class="exportList.length % 2 === 0 ? index % 2 === 0 ? 'output-information-item-bg' : '' : index % 2 === 0 ? '' : 'output-information-item-bg'">
			<span></span>
			<span>{{ item.log }}</span>
		</div>
	</transition-group>
</div>

data() {
	return {
		exportList: [
          {
            id: 1,
            log: '数据1'
          },
          {
            id: 2,
            log: '数据2'
          },
        ]
	}
},
created() {
	// 这里是模拟数据的增加
	let index = 2
    setInterval(() => {
      index++
      const aa = {
        id: index,
        log: '数据' + index
      }
      this.exportList.unshift(aa)
    }, 2000)
}

<style lang="scss" scoped>
.v-enter-active {
  animation: move 1s linear;
}
// 通过改变绝对定位的位置来达到移动的效果
@keyframes move {
  0% {
    top: -30px;
    height: 0px;
  }
  100% {
    top: 0px;
    height: 30px;
  }
}
// 这里记得加绝对定位
.output-information-content {
	 height: 100%;
     overflow: auto;
     position: relative;
     .output-information-item {
		  width: 100%;
          height: 30px;
          line-height: 30px;
          position: relative;
          left: 0;
	}
}
.output-information-item-bg {
	border-radius: 5px;
	background-color: rgba(2, 217, 253, 0.3);
}
</style>