Text achieve announcement carousel effect

<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'

  default {Export 
    name: "announcementList", 
    computed: { 
      text () { 
        return { 
          ID: this.number, 
          Val: this.textArr [this.number] 
        } 
      } 
    }, 
    Mounted () { 
      this.startMove () 
    }, 
    Methods : { 
      the startMove () { 
        // disable eslint-Line-Next- 
        the let the setTimeout Timer = (() => { 
          IF (this.number === 2) { 
            this.number = 0; 
          } the else { 
            this.number + = 1; 
          } 
          this.startMove (); 
        }, 2000); // scroll will not need to pause 2000 into animation duration 
      }

    }, 
    Data () { 
      return { 
        textArr: [ 
          'first announcement. 1', 
          '2 second showroom second announcement', 
          '3 third showroom third showroom third bulletin' 
        ], 
        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 = left: Center; 
    } 

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

    .text {
      width: 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>