实现公告文字轮播效果

<template>
  <div class="announcementList">
    <el-row :gutter="20">
      <el-col :span="6" class="lable">
        <el-tag type="danger" size="small " effect="dark">公告</el-tag>
      </el-col>
      <el-col :span="12" v-if="1==0">
        <div class="displayContent">暂无公告</div>
      </el-col>
      <el-col :span="6">
          <div class="textBox">
            <transition name="slide">
              <p class="text" :key="text.id">{{text.val}}</p>
            </transition>
          </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  import baseModule from '../baseModule'

  export default {
    name: "announcementList",
    computed: {
      text() {
        return {
          id: this.number,
          val: this.textArr[this.number]
        }
      }
    },
    mounted() {
      this.startMove()
    },
    methods: {
      startMove() {
        // eslint-disable-next-line
        let timer = setTimeout(() => {
          if (this.number === 2) {
            this.number = 0;
          } else {
            this.number += 1;
          }
          this.startMove();
        }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
      }

    },
    data() {
      return {
        textArr: [
          '1 第一条公告',
          '2 第二条公告第二条公告',
          '3 第三条公告第三条公告第三条公告'
        ],
        number: 0
      }
    },

  }
</script>

<style scoped lang="less">
  .announcementList {
    margin: 0;
    padding: 0;
    font-size: 14px;

    .lable {
      margin:5px 0px 7px 10px;
    }

    .displayContent {
      color: #9f9f9f;
      text-align: center;
    }

    .textBox {
       100%;
      height: 35px;
      margin: 0 auto;
      margin-top: 3px;
      overflow: hidden;
      position: relative;
      text-align: center;
    }

    .text {
       100%;
      position: absolute;
      bottom: 0;
    }

    .slide-enter-active, .slide-leave-active {
      transition: all 0.5s linear;
    }
    .slide-enter {
      transform: translateY(20px) scale(1);
      opacity: 1;
    }
    .slide-leave-to {
      transform: translateY(-20px) scale(0.8);
      opacity: 0;
    }
  }
</style>