一. 动画分析
年报类型页面的动画都是第一行字体先触发动画 之后第二行字体再出现动画 以此类推
二. 动画写法
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行字
后方以此类推即可