css动画让文字一行一行逐渐显示

这几天在做一个年终总结的活动，需要将显示的内容以动画的形式逐渐显示，

而且还要使用轮播的效果显示好几页，每页内容都不同

其实简单的css就可以实现，但是css代码太长，就写了个循环用js实现啦我是在Vue的基础上写的，

1、轮播可以使用插件swiper，使用可以参考 https://www.swiper.com.cn/，或者我下篇文章介绍

2、每页轮播页面设置类名 swiper1，swiper2...，content_box是每页的内容

 <div class="swiper-slide swiper2">
        <div class="content_box">
          <p>2018年01月01日</p>
          <p>故事与你，不期而遇</p>
        </div>
        <div class="content_box">
          <p >你的第一篇作品</p>
          <p>《我的心里也有鬼》</p>
          <p>与我们见面</p>
        </div>
        <div class="content_box">
          <p>至此，你已创作</p>
          <p> 文章</p>
        </div>
       
      </div>

3、定义动画

@keyframes  ani{
      0%{  opacity:0; }
      100%{ opacity:1; }
  }

4、写个动画的方法

animation() {

      var start = 2;  //开始时间

      var end;

      for(var j =2; j <8; j++) {        //循环有多少页

        for(var i= 1; i < 5; i++) {     //循环每页的内容

          end = start + 0.4       //结束时间=开始时间+0.4s

          $('.swiper'+j+' .content_box:nth-child('+i+')').css('animation','ani '+start+'s '+end+'s both')

          start = end;   //每行内容结束将结束时间赋值给下一行开始时间

        }

        start = start + 1   //每页翻页的时候防止时间间隔太短动画效果不明显，所以开始时间+1s

      }

        

    },