这是我在制作装载微调器的同时在2019年解决此问题的方法。我正在使用React功能组件。
我有一个父应用程序组件,其中有一个子Spinner组件。
应用程式会显示应用程式是否正在载入的状态。加载应用程序时,将正常显示Spinner。当应用未加载时(isLoading
为false),将使用prop渲染SpinnershouldUnmount
。
App.js:
import React, {useState} from 'react';
import Spinner from './Spinner';
const App = function() {
const [isLoading, setIsLoading] = useState(false);
return (
<div className='App'>
{isLoading ? <Spinner /> : <Spinner shouldUnmount />}
</div>
);
};
export default App;
Spinner会显示其是否处于隐藏状态。开始时,使用默认的道具和状态,旋转器将正常渲染。所述Spinner-fadeIn
类动画它衰落英寸当微调接收丙shouldUnmount
它与呈现Spinner-fadeOut
类代替,动画它淡出。
但是,我也希望该组件在褪色后卸下。
在这一点上,我尝试使用onAnimationEnd
React合成事件,类似于上面的@ pranesh-ravi的解决方案,但是没有用。取而代之的是,我过去setTimeout
将状态设置为隐藏,且延迟时间与动画的长度相同。延迟后,Spinner将更新isHidden === true
,并且不会呈现任何内容。
这里的关键是,父级不卸载子级,它告诉子级何时卸载,而子级在完成其卸载业务后自行卸载。
Spinner.js:
import React, {useState} from 'react';
import './Spinner.css';
const Spinner = function(props) {
const [isHidden, setIsHidden] = useState(false);
if(isHidden) {
return null
} else if(props.shouldUnmount) {
setTimeout(setIsHidden, 500, true);
return (
<div className='Spinner Spinner-fadeOut' />
);
} else {
return (
<div className='Spinner Spinner-fadeIn' />
);
}
};
export default Spinner;
Spinner.css:
.Spinner {
position: fixed;
display: block;
z-index: 999;
top: 50%;
left: 50%;
margin: -40px 0 0 -20px;
height: 40px;
width: 40px;
border: 5px solid #00000080;
border-left-color: #bbbbbbbb;
border-radius: 40px;
}
.Spinner-fadeIn {
animation:
rotate 1s linear infinite,
fadeIn .5s linear forwards;
}
.Spinner-fadeOut {
animation:
rotate 1s linear infinite,
fadeOut .5s linear forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}