使用带有css@keyframe的微调器的React应用程序。旋转器在破碎前工作了一秒钟是问题所在
codePUBLIC/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- SPLASH SCREEN-->
<link
rel="stylesheet"
id="layout-styles-anchor"
href="%PUBLIC_URL%/css/splash-screen.css"
/>
<!-- New -->
<link
rel="stylesheet"
id="layout-styles-anchor2"
href="%PUBLIC_URL%/css/spin.css"
/>
<!-- Setup `default`, `es2015`, `es2016`, `es2017`, and `Intl` polyfills from https://cdn.polyfill.io/v3/url-builder/ -->
<script
crossorigin="anonymous"
src="https://polyfill.io/v3/polyfill.min.js?features=es2017%2Cdefault%2Ces2015%2Ces2016%2CIntl"
></script>
</head>
<body id="kt_body">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="splash-screen" class="kt-splash-screen">
<img
src="%PUBLIC_URL%/media/logos/tigmat/logo-name.png" width='90px'
alt="Tigmat imageLink"
/>
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>
<div id="layout-portal"></div>
</body>
</html>
来自源代码的PUBLIC/css/spin.css
.loader {
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #29b2b1;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #29b2b1;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #29b2b1;
}
@keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
至于react代码：index.js，请注意setTimeout在那里，这样我就可以进行实验了
import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import React from "react";
import ReactDOM from "react-dom";
import axios from "./tigmat/axios/axios";
import * as _redux from "./redux";
import store, {persistor} from "./redux/store";
import App from "./app/App";
import "./index.scss"; // Standard version
import "./_metronic/_assets/plugins/keenthemes-icons/font/ki.css";
import "socicon/css/socicon.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "./_metronic/_assets/plugins/flaticon/flaticon.css";
import "./_metronic/_assets/plugins/flaticon2/flaticon.css";
import "react-datepicker/dist/react-datepicker.css";
import {
MetronicLayoutProvider,
MetronicSplashScreenProvider,
MetronicSubheaderProvider
} from "./_metronic/layout";
import {MetronicI18nProvider} from "./_metronic/i18n";
import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';
import "video-react/styles/scss/video-react.scss";
import "./tigmat/scss/font/fira_code.css";
setTimeout(() => {
ReactDOM.render(
<MetronicI18nProvider>
<MetronicLayoutProvider>
<MetronicSubheaderProvider>
<MetronicSplashScreenProvider>
<App store = {store} persistor = {persistor} basename = {PUBLIC_URL}/>
</MetronicSplashScreenProvider>
</MetronicSubheaderProvider>
</MetronicLayoutProvider>
</MetronicI18nProvider>,
document.getElementById("root")
);
}, 20000)
有什么办法解决这个问题吗？