import styled, { keyframes } from 'styled-components';
import useStore from '../../store/store';
const LoadingPage = () => {
const { loading } = useStore();
return (
<>
<LoadingContainer className={loading ? ''
: 'loaded'}>
{/* <Loader />
<div>Loading...</div> */}
<LoadingLeft className={loading ? ''
: 'loaded'} />
<LoadingRight className={loading ? ''
: 'loaded'} />
<SpinnerBox className={loading ? ''
: 'loaded'}>
<div className='configure-border-1'>
<div className='configure-core'></div>
</div>
<div className='configure-border-2'>
<div className='configure-core'></div>
</div>
<div className='loading-word'>加载中...</div>
</SpinnerBox>
</LoadingContainer>
</>
)
}
// 定义加载动画
const spin = keyframes`
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); }
`;
// Loading 组件样式
const LoadingContainer = styled.div`
display
: flex;
flex-direction
: column;
justify-content
: center;
align-items
: center;
height
: 100%;
width
: 100%;
font-size
: 24px;
z-index
: 999;
transition
: all 2s;
opacity
: 1;
position
: fixed;
&.loaded {
opacity
: 0;
position
: absolute;
z-index
: -1001;
}
`;
const Loader = styled.div`
border
: 8px solid rgba(255, 255, 255, 0.3);
border-top
: 8px solid white;
border-radius
: 50%;
width
: 60px;
height
: 60px;
animation
: ${spin} 1s linear infinite;
`;
const LoadingLeft = styled.div`
position
: fixed;
z-index
: 1000;
width
: 52%;
height
: 100%;
background
: #37474f;
left
: 0;
transition
: all 1s;
&.loaded {
transform: translate(-100%, 0);
}
`
const LoadingRight = styled.div`
position
: fixed;
z-index
: 1000;
width
: 52%;
height
: 100%;
background
: #37474f;
right
: 0;
transition
: all 1s;
&.loaded {
transform: translate(100%, 0);
}
`
const SpinnerBox = styled.div`
position
: fixed;
z-index
: 1001;
opacity
: 1;
transition
: all .3s;
&.loaded {
opacity
: 0;
}
.configure-border-1 {
position
: absolute;
padding
: 3px;
width
: 115px;
height
: 115px;
background
: #ffab91;
animation
: configure-clockwise 3s ease-in-out 0s infinite alternate;
.configure-core {
width
: 100%;
height
: 100%;
background
: #37474f;
}
}
.configure-border-2 {
left
: -115px;
padding
: 3px;
width
: 115px;
height
: 115px;
background
: #3ff9dc;
transform: rotate(45deg);
animation
: configure-xclockwise 3s ease-in-out 0s infinite alternate;
.configure-core {
width
: 100%;
height
: 100%;
background
: #37474f;
}
}
.loading-word {
position
: absolute;
color
: #eff;
font-size
: 16px;
top
: 50%;
left
: 50%;
transform: translate(-50%, -50%);
white-space
: nowrap;
}
`
export default LoadingPage出现这个bug tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used
:
本文介绍了解决H5页面中红旗图片使用transform旋转导致层级错乱问题的方法。通过应用translateZ调整，实现了预期的视觉效果并修复了z-index失效的问题。
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
