场景

有些东西加载会因为某些不可抗拒的原因而加载缓慢,一般都是一个loading动画加个进度条做过渡,进度条都说不定是假的,所以就有加些随机文案的loading动画出现

(这种组件轮子非常多,但是不影响我自己做)

组件

还是直奔主题,可以直接可以copy的轮子

<template>
  <div class="loadOne-wrap">
    <div class="animationBox">
      <img class="widthBox" src="./loadOne.gif" />
      <div class="wordBox">
        <transition-group class="list">
          <div v-for="item in list" :key="item.id">{{ item.word }}</div>
        </transition-group>
      </div>
    </div>
  </div>
</template>

<script
export default {
  name: 'loadOne',
  data() {
    return {
      // 渲染数组
      list: [{ word: '加载中...', id: 0 }],
      // 随机文案数组
      wordList: [
        'Hi',
        'Holle',
        '嘟嘟嘟',
        '看不见我',
        '恐怖如斯'
      ],
      // 排除上一次使用过文案数组
      useList: [0, 1, 2, 3, 4],
      // 上一次随机数
      lastNum: 0,
      // 数组生成id
      id: 1
    }
  },
  mounted() {
    this.intervalTimer = setInterval(() => {
      this.list.push(this.randomWord())
      this.timeoutTimer = setTimeout(() => this.list.shift(), 500)
    }, 1500)
  },
  beforeDestroy() {
    this.intervalTimer && clearInterval(this.intervalTimer)
    this.timeoutTimer && clearTimeout(this.timeoutTimer)
  },
  methods: {
    // 随机文案
    randomWord() {
      let randomNum = parseInt(Math.random() * 4)
      this.lastNum = this.useList.filter(a => a !== this.lastNum)[randomNum]
      return { word: this.wordList[this.lastNum] || 'Hi', id: this.id++ }
    }
  }
}
</script>

<style lang="less" scoped>
.loadOne-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #000;

  .animationBox {
    position: relative;
    width: 65px;
    height: 65px;
    .widthBox {
      width: 100%;
      height: 100%;
    }
    .wordBox {
      overflow: hidden;
      color: #fff;
      line-height: 15px;
      font-size: 11px;
      font-weight: 400;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 15px;

      div {
        width: 200px;
        height: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .v-move,
  .v-enter-active,
  .v-leave-active {
    transition: all 500ms ease-in;
  }

  .v-enter-from {
    transform: translateY(15px);
  }
  .v-leave-to {
    transform: translateY(-15px);
  }
  .v-leave-active {
    position: absolute;
  }
}
</style>

示意图

注意

1.此组件仅为雏形,其他功能和样式还请酌情添加与修改

2.切换页面后transition-group动画会停止,定时器不会停止,所以文案在页面切换回来字幕会疯狂重叠,停的越久重叠越多,可以将改为使用类名动画解决