项目场景:
提示:这里简述项目相关背景:
最近在项目(react)需要实现loading的动画,心想这不很简单么,结果发现动画怎么搞也不生效
问题描述
本项目主要是通过react实现,下边主要贴一下简化后的代码
// 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);
}
}
}
}
原因分析:
打开F12,在样式中确实没有找到circle这个动画名称,那大概率应该是被postcss这个插件编译了,所以我们只需要能让这个名字不编译或者是找到编译后的名字即可
解决方案:
解决方案很简单,调用@keyframes的元素后面添加 :local 就行了
// 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);
}
}
参考链接:issue