为啥 className 出现在我的样式规则中？

Posted 2023-03-16

【中文标题】为啥 className 出现在我的样式规则中？

【英文标题】：Why is className showing up in my style rule?为什么 className 出现在我的样式规则中？

【发布时间】：2019-12-03 23:32:21

【问题描述】：

我正在尝试应用关键帧动画来淡出元素，但是当该类被添加到元素时，它似乎会调整规则本身并将 className 注入规则以引用 fadeOut 关键帧。

      <div
        className=cx(
          [styles['announcement__sliderWrapper__single']]: true,
          [styles['announcement__dismissed']]:
            dismissedItems.includes(annnouncement.id)
        )
      >

@keyframes fadeOut 
  0% 
    opacity: 100%;
  
  99% 
    opacity: 0%;
  
  100% 
    display: none;
  


.announcement__dismissed 
  animation: fadeOut 5s 0 1; /* IE 10+, Fx 29+ */

当类应用于元素时，Chrome 开发工具中会显示以下内容：

.Announcements__announcement__dismissed___2-ucg 
    -webkit-animation: Announcements__fadeOut___u8Ob- 5s 0 1;
    animation: Announcements__fadeOut___u8Ob- 5s 0 1;

【问题讨论】：

你正在使用一个框架/库，我想你没有在标签或描述中列出。也许材料-ui？这不是 React 行为

是的，对不起！从类名中使用 cx。我看看能不能加进去

不，cx 只是类名的实用程序...您确定您不再使用任何东西吗？你的 CSS 是老式的纯 CSS 还是什么？

啊k。我正在使用 sass

【参考方案1】：

由于SASS nesting，类名可能被注入到您的动画名称中，但如果没有更多上下文，我们无法确定。

如果你想让这个动画工作，你应该改变两件事：

opacity 应该是介于 0 和 1 之间的数字，而不是 0% 和 100%。 您将 iteration count 设置为 0（淡出 5s 0 1)，延迟为 1（不指定单位）。您可以通过查看元素的计算属性来检查这一点。 （尝试fadeOut 5s 1s）