CSS 个模块和 CSS 个关键帧动画

Question

我正在尝试使用 React、关键帧、CSS 模块（和 SASS）制作一个简单的动画。问题是 CSS 模块散列关键帧名称的方式与散列本地 classes 的方式相同。

JS代码

//...

export default () => {
  const [active, setActive] = useState(false);
  return(
    <div className={active ? 'active' : 'inactive'}
      onClick={() => setActive(!active)}
    >content</div>
  )
}

尝试使所有内容成为全局，使用 this 源作为教程（未编译）：

//default scope is local

@keyframes :global(animateIn) {
  0% { background: black; }
  100% { background: orange; }
}

@keyframes :global(animatOut) {
  0% { background: orange; }
  100% { background: black; }
}

:global {
  .active {
    background: orange;

    animation-name: animateIn;
    animation-duration: 1s;
  }

  .inactive {
    background: black;

    animation-name: animateOut;
    animation-duration: 1s;
  }
}

改变这个也不起作用：

:global {
  @keyframes animateIn {
    0% { background: black; }
    100% { background: orange; }
  }

  @keyframes animateOut {
    0% { background: orange; }
    100% { background: black; }
  }
}

另一次尝试（无效）：

@keyframes animateIn {
  0% { background: black; }
  100% { background: orange; }
}

@keyframes animateOut {
  0% { background: orange; }
  100% { background: black; }
}

:global {
  .active {
    background: orange;

    :local {
      animation-name: animateIn;
    }
    animation-duration: 1s;
  }

  .inactive {
    background: black;

    :local {
      animation-name: animateOut;
    }
    animation-duration: 1s;
  }
}

如何在 CSS 模块全局范围内使用关键帧？是否可以在全局范围内使用局部范围关键帧class?

Answer 1

您的第三次尝试几乎没问题，您只需在 :local 之前添加 & 并确保它们之间有一个 space。通过这样做，您可以切换到选择器中的本地范围。

:global {
    .selector {
        & :local {
            animation: yourAnimation 1s ease;
        }
    }
}

@keyframes yourAnimation {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

编译为

.selector {
    animation: [hashOfYourAnimation] 1s ease;
}

Answer 2

原来的答案很好用。这在没有 SASS 的情况下有效：

:global {
    .selector {
        // global selector stuff ...
    }

    .selector :local {
        animation: yourAnimation 1s ease;
    }
}

@keyframes yourAnimation {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Answer 3

在我的案例中，上述解决方案均无效，但我发现 css-loader 解析所有驼峰式单词并解析它们，因此我将我的 @keyframes 动画名称更改为 snake_case 并且有效!...

CSS 个模块和 CSS 个关键帧动画

CSS Modules and CSS keyframe animations

css

css-animations

reactjs

css-modules