css测试动画进度条单次
<div onClick={this.judgeProgressClick}>判断打开进度条</div>
<AnimationProgress>
<div className="animation-axis" style={{ animation: judgeAnimationProgress ? "progressAnimate 8s linear" : "unset" }} />
</AnimationProgress>
样式
export const AnimationProgress = styled.div`
width: 100%;
height: 6px;
padding: 1px;
background-color: rgba(0, 218, 255, 0.2);
@keyframes progressAnimate {
from { width: 0;}
to { width: 100%; }
}
.animation-axis{
height: 4px;
display: inline-block;
width: 100%;
background-color: rgb(0, 218, 255);
}
`;