CSS 模块和 CSS 关键帧动画

Posted 2023-02-22

【中文标题】CSS 模块和 CSS 关键帧动画

【英文标题】：CSS Modules and CSS keyframe animations

【发布时间】：2019-12-29 06:08:15

【问题描述】：

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

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 模块全局范围内使用关键帧？是否可以在全局范围类中使用局部范围关键帧？

【参考方案1】：

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

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


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

编译成

.selector 
    animation: [hashOfYourAnimation] 1s ease;

【讨论】：

它也没有空格，谢谢你的回答。

【参考方案2】：

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

:global 
    .selector 
        // global selector stuff ...
    

    .selector :local 
        animation: yourAnimation 1s ease;
    


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

【参考方案3】：

在我的情况下，上述解决方案均无效，但我发现 css-loader 解析所有 camelCased 单词并解析它们，所以我将我的 @keyframes 动画名称更改为 snake_case 并且有效！...