zoukankan      html  css  js  c++  java
  • 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);
      }
    }
  • 相关阅读:
    BZOJ2337 [HNOI2011]XOR和路径
    「学习笔记」3.31代码学习
    uva live 12846 A Daisy Puzzle Game
    Cannot use ImageField because Pillow is not installed
    Android点击Button水波纹效果
    hdu 1241 Oil Deposits
    c++ 字符输入读取
    clutter recoder
    C/C++获取数组长度
    vector array and normal stanard array
  • 原文地址:https://www.cnblogs.com/victorlyw/p/12295673.html
Copyright © 2011-2022 走看看