年报类型页面动画

一. 动画分析

年报类型页面的动画都是第一行字体先触发动画  之后第二行字体再出现动画 以此类推

二. 动画写法

1.动画封装

@keyframes identifier {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

2. 添加动画

a. 第一行字

animation: identifier 1.5s linear 0s;

我们添加这行 css 动画时间1.5s 0s延迟  也就是进页面直接触发

b. 第二行字

opacity: 0;
animation: identifier 1.5s linear 1.5s;

首先我们给它设置隐藏和动画并且延迟1.5s  因为我们要等第一行字的动画效果呈现完  第二行再出来   这里时间大家看着设置  然后用 js 设置延时器

setTimeout(() => {
    this.$refs.xx.style.opacity = 1
}, 1500)

c. 第三行字

opacity: 0;
animation: identifier 1.5s linear 3s;

等第二行字的效果呈现完 第三行才出现

setTimeout(() => {
    this.$refs.xx.style.opacity = 1
}, 3000)

d. 第n行字

后方以此类推即可