如何解决React <Suspense>后备加载器动画
我想在显示内容之前使加载程序CSS动画完成animation-duration: 0.5s
,但是<Suspense fallback={}>
仅在获取文件时显示加载程序。如何使加载器CSS动画完成?
./App.jsx
import React,{ Suspense } from 'react';
import Preloader from './views/Preloader';
export default () => {
return <Suspense fallback={<Preloader />}></Suspense>;
};
./views/Preloader.jsx
import React from 'react';
import logo from '../assets/img/logo.svg';
import '../assets/styles/preloader.scss';
export default () => (
<div className="preloader">
<img src={logo} alt="logo" />
</div>
);
./assets/styles/preloader.scss
div.preloader {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: disappear;
animation-duration: 0.5s;
animation-fill-mode: forwards;
img {
width: 8em;
animation: grayscaleAndScale;
animation-duration: 0.5s;
}
}
@keyframes grayscaleAndScale {
0% {
filter: grayscale(1);
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
filter: grayscale(0);
transform: scale(1.5);
}
}
@keyframes disappear {
50% {
opacity: 1;
}
70% {
opacity: 0;
}
100% {
opacity: 0;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。