text scroll up + animation

<template>
  <div class="box">
    <div class="item" :class="{'current': index === 0, 'to-big': toBig && index === 1, 'running': running}" v-for="item,index in swiper" :key="index">
      {
    
    {
    
    item}}
    </div>
  </div>
</template>

<script>
  // 整体思路
  // 每次只显示两条数据，循环从总的数据列表中取
  export default {
    
    
    props: {
    
    
      // 轮播数据
      list: {
    
    
        type: Array,
        required: true,
        default: () => {
    
    
          return [1,2,3,4,5,6]
        }
      },
      // 默认显示两行
      defaultShowData: {
    
    
        type: Array,
        required: true,
        default: () => {
    
    
          return [1,2]
        }
      }
    },
    data() {
    
    
      return {
    
    
        swiper: this.defaultShowData,
        index: 1,
        running: false,
        toBig: false
      }
    },
    mounted() {
    
    
      setInterval(() => {
    
    
        this.toBig = true
        if (this.index + 1 >= this.list.length) {
    
    
          this.index = 0
        } else {
    
    
          this.index += 1
        }
        this.swiper.push(this.list[this.index])
        this.running = true
        let timer = setTimeout(() => {
    
    
          this.swiper.shift()
          clearTimeout(timer)
          this.running = false
          this.toBig = false
        }, 400)
      }, 3000)
    }
  }
</script>

<style scoped lang="scss">
  .box {
    
    
    height: 60px;
    overflow: hidden;
  }
  // 每一行的样式
  .item {
    
    
    font-size: 16px;
    opacity: 0.6;
    line-height: 30px;
    background-color: #fff;
  }
  // 文字向上滚动的动画
  .running {
    
    
    animation: fadeToTop .4s ease-in-out 0s infinite;
  }
  @keyframes fadeToTop {
    
    
    0% {
    
    
      transform: translateY(0);
    }
    100% {
    
    
      transform: translateY(-100%);
    }
  }
  // 当前显示的数据样式
  .current {
    
    
    font-size: 20px;
    opacity: 1;
    font-weight: 700;
  }
  // 文字变大的动画
  .to-big {
    
    
    animation: toBig .4s ease-in-out 0s 1;
  }
  @keyframes toBig {
    
    
    0% {
    
    
      font-size: 16px;
      opacity: .6;
      font-weight: 500;
      transform: translateY(0%);
    }
    25% {
    
    
      opacity: .7;
    }
    50% {
    
    
      opacity: .8;
    }
    75% {
    
    
      opacity: .9;
    }
    100% {
    
    
      font-size: 20px;
      opacity: 1;
      font-weight: 700;
      transform: translateY(-100%);
    }
  }
</style>