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);
  }
}

 

上一篇:Emlog给网站图片添加抖动特效教程


下一篇:js实现下拉刷新功能