html keyframes无效,CSS Module解决全局或本地使用@keyframes无效问题
最近使用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);
}
}
標簽：style,rotate,bottom,globeRotate,keyframes,transform,Module,CSS
來源： https://www.cnblogs.com/victorlyw/p/12295673.html
總結
以上是生活随笔為你收集整理的html keyframes无效,CSS Module解决全局或本地使用@keyframes无效问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 只有程序员才深有体会-------让人直
- 下一篇： 2013.05.09