vue 上下滚动通知组件

vue 上下滚动淡入淡出通知组件:
效果：

子组件：

<template>
  <div class="text-container">
    <!-- 滚动通知组件 -->
    <transition class=""
                name="slide"
                mode="out-in">

      <p class="text"
         :key="text.id">
        <a-tag style="text-shadow: none"
               color="#f50">
          提示
        </a-tag>
        {{text.val}}
      </p>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'TextScroll',
  props: {
    dataList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      count: 0, // 当前索引
      intervalId: null, // 定时器ID
      playTime: 10000, // 定时器执行间隔
    }
  },
  computed: {
    text() {
      return {
        id: this.count,
        val: this.dataList[this.count],
      }
    },
  },
  created() {
    this.intervalId = setInterval(() => {
      // 定义定时器
      this.getText()
    }, this.playTime)
  },
  methods: {
    getText() {
      const len = this.dataList.length // 获取数组长度
      if (len === 0) {
        return // 当数组为空时，直接返回
      }
      if (this.count === len - 1) {
        // 当前为最后一个时
        this.count = 0 // 从第一个开始
      } else {
        this.count++ // 自增
      }
    },
  },
  destroyed() {
    clearInterval(this.intervalId) // 清除定时器
  },
}
</script>

<style scoped>
.text-container {
  font-size: 14px;
  color: #fff;
  margin-right: 20px;
  margin-bottom: 3px;
  text-shadow: 5px 5px 5px #000;
  /* height: 60px; */
}
.scrollTip {
  font-size: 12px;
  border: 1px solid #000;
  background: #f50;
  display: inline-block;
}
.text {
  text-align: right;
  margin: auto 0;
}

.slide-enter-active {
  transition: all 1.5s ease-in;
  opacity: 1;
}
.slide-leave-active {
  transition: all 1s ease-out;
  opacity: 0;
}

.slide-enter {
  transform: translateY(10px);
  transition: all 1s ease-in;
  opacity: 0;
}

.slide-leave-to {
  transform: translateY(-15px);
}
</style>

父组件：

  <TextScroll :dataList="noticeList"></TextScroll>