vue实现动画效果一行一行的显示

在做年度报告总结的时候有这样一个需求，要求页面有加载效果，加载的效果就是图片和文字一行一行的先后显示

1，可以用循环数据实现,这种方法更适合页面样式简单，数据少的情况。

<template>
  <div>
    <p v-for="(item, index) in lineArrb" :key="index">{{ item }}</p >
  </div>
</template>

<script>
export default {
  data() {
    return {
      lineArr: ["第一行", "第二行", "第三行"],
      lineArrb: [],
      timer:null
    };
  },
  mounted() {
    let num= 0;
    this.timer = setInterval(() => {
      if (index < this.lineArr.length) {
        this.lineArrb.push(this.lineArr[index]);
        num++;
      } else {
        clearInterval(this.timer);
      }
    }, 1000);
  },
};
</script>

2.因为页面已经事先绘制好了，不想在vue模板上增加循环，那么只能在css搞点动作了

因为年度报告有好几页，只是在某一页加上动画所以先判断是哪页，比如我需要在第三页加动画，所以判断当前页是不是第三页，如果当前在第三页，滑到第二页在返回第三页时不要动画效果，所以还要加判断

实现思路：先给要加动画的dom加上class名，在js中通过class获取到到dom,循环在dom添加style动画animationDelay 加上延迟几秒的值。比如第一行要延迟一秒显示，在第一行显示出来第二行再显示，也就是第二行延迟2s显示

<template>
  <div>
     <swiper
        ref="mySwiper"
        class="swiper-container"
        :direction="'vertical'"
        @slideChange="onSlideChange"
      >
       <swiper-slide>
        我是第一页
      </swiper-slide>
      <swiper-slide>
        我是第二页
      </swiper-slide>
      <swiper-slide>
            <p :class="[
                  { content_delay: isDelay },
                  { content_duration: isDuration },
                ]">第一行</p>
            <p :class="[
                  { content_delay: isDelay },
                  { content_duration: isDuration },
                ]">第二行</p>
            <p :class="[
                  { content_delay: isDelay },
                  { content_duration: isDuration },
                ]">第三行</p>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDelay: false,
      isDuration: false,
      currentNum:0,
      num:0
    };
  },
  mounted() {
    //当前页
    onSlideChange(swiper){
      this.currentNum = swiper.activeIndex + 1;
      if (this.currentNum === 3){ 
        this.isDelay = true;
        this.num++;
        if (this.num > 1) {
          this.isDuration = true;
          this.isDelay = false;
        }
        this.$nextTick(() => {
          this.animation();
        });
      }
    },
    //添加动画逐行显示
    animation() {
      this.delay = 0;
      var lineByLineElements = document.querySelectorAll(".content_delay");
      this.delayLeng = lineByLineElements.length;
      for (var i = 0; i < lineByLineElements.length; i++) {
        lineByLineElements[i].style.animationDelay = this.delay + "s";
        this.delay += 1; // 调整每行之间的延迟时间
      }
    },
  },
};
</script>