css 模块在 jsx 中引用关键帧名称答案

【问题标题】：css modules reference keyframe name inside jsxcss 模块在 jsx 中引用关键帧名称
【发布时间】：2019-07-19 13:48:36
【问题描述】：

我正在使用 css-loader 的 css 模块，但我偶然发现了一个问题。我有一个LoadingOverlay 组件，它显示了一个持续时间为 ms 的加载器。我使用组件内的以下代码在叠加层上应用淡入淡出动画：

if (show) {
   return {
       animation: `fade-out-long ${duration}ms ease-out forwards`
   };
}

此样式对象应用于覆盖节点。我这样做是因为持续时间是从父组件传递的 prop。我的问题是 LoadingOverlay.scss 是一个 scss 模块，它使用 @include 来包含这样的动画：

@import '../../../constants/animations';

@include fade-out-long-keyframes();
@include fade-out-long2-keyframes();

并且动画名称也被编译为LoadingOverlay-module__fade-out-long。

那我怎样才能从我的 jsx 中引用正确的动画名称呢？

【问题讨论】：

【解决方案1】：

我想你错过了关键帧上的:global。您必须使用 :global 编写关键帧，如下所示

@keyframes :global(slideInFromRight) {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

【讨论】：

嗨，是的，这是一个选项，但我只是在我的 scss 模块中使用了animation-name，并在我的 jsx 中使用了animation-duration，这样我就可以保留我的animations.scss 而不是scss 模块文件，还让css-loader 像它一样转换关键帧名称，同时仍然能够将动画持续时间作为道具注入。