Project scenario:
提示：这里简述项目相关背景：
Recently, the project (react) needs to realize the loading animation. I thought this is not very simple, but it turns out that the animation does not work no matter how I do it.
Problem Description
This project is mainly implemented through react, and the simplified code is mainly posted below
// index.jsx文件
import style from './style.less';
const Loading = () => (
<div className={
style['loading-container']}>
<div class="loading" />
</div>
);
export default Loading;
// style.less文件
.loading-container {
height: 100vh;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
:global {
.loading {
width: 30px;
height: 30px;
border: 2px solid #000;
border-top-color: transparent;
border-radius: 100%;
animation: circle infinite 0.75s linear;
}
// 动画
@keyframes circle {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
}
}
Cause Analysis:
Open F12, the animation name of circle is indeed not found in the style, then the high probability should be compiled by the postcss plug-in, so we only need to make this name not to be compiled or find the compiled name.
solution:
The solution is simple, just add: local after the element calling @keyframes
// index.jsx文件
import style from './style.less';
const Loading = () => (
<div className={
style['loading-container']}>
<div class="loading" />
</div>
);
export default Loading;
// style.less文件
.loading-container {
height: 100vh;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
:global {
.loading {
width: 30px;
height: 30px;
border: 2px solid #000;
border-top-color: transparent;
border-radius: 100%;
& :local {
animation: circle infinite 0.75s linear;
}
}
}
}
// 动画
@keyframes circle {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Reference link: issue