最近使用CSSModule开发react项目,遇到一个问题,使用@keyframes无效,问题如下
/** less + css module **/ :global { .effect-bottom { animation: globeRotate 0.5s linear infinite; } @keyframes globeRotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } } /** 编译结果如下 **/ .pages-style-gameWrap .effect-bottom { top: auto; bottom: 0; animation: globeRotate 0.5s linear infinite; } @keyframes pages-style-globeRotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
可以看到 @keyframes 名称也被编译了,这样就获取不到 @keyframes 的名称了,解决办法如下(只需在调用@keyframes的元素后面添加 :local 就行了):
:global { .effect-bottom :local { animation: globeRotate 0.5s linear infinite; } @keyframes globeRotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } } /** 编译结果如下 **/ .pages-style-gameWrap .effect-bottom { top: auto; bottom: 0; animation: pages-style-globeRotate 0.5s linear infinite; } @keyframes pages-style-globeRotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }