0

我正在尝试应用关键帧动画来淡出元素，但是当该类被添加到元素时，它似乎会调整规则本身并将 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;
}
4

1 回答 1

0

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

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

  1. opacity应该是一个介于 0 和 1 之间的数字，而不是 0% 和 100%。
  2. 您将迭代计数设置为 0（fadeOut 5s 0 1），并将延迟设置为 1（未指定单位）。您可以通过查看元素的计算属性来检查这一点。（尝试fadeOut 5s 1s）
于 2019-07-25T16:36:31.567 回答