JAVA高级面试进阶训练营视频教程

admin

最近使用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);
  }
}