前言

之前在编写代码过程中，想要将展示出来的文章内容一行一行的显示出来，以至于不那么突兀，同时也让页面具有一点动感

实现

我这里是以vue为例，因为数据是从后端接口请求过来的，且是数组类型，于是就借助v-for依次遍历展示出来

<template>
    <div>
     <p v-for="(item, index) in contents" 
        <!-- 根据需求设置显示出来的时间间隔 -->
       :style="{'animation-delay': index*0.5 +'s'}"> 
             {{ item }}
         </p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            contents: []   //自行添加数组类型且需要展示的数据
        }
    }

}
</script>

<style scoped>
.say p{
    line-height:35px;
    opacity: 0;
    /* 使用定义的动画 */
    animation: 1s show ease-out forwards; 
}

/* 定义动画 */

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

</style>

效果

效果图大致就是这样（网图）