GSAP CSSRulePlugin 颜色不切换回来

Question

我创建了一个汉堡包菜单切换，我试图让它在 'dark mode' 处于活动状态时改变颜色。不幸的是，它不是很有效。

伪元素一旦改变就不会切换回来。 '.hamburger' 确实如此。

.hamburger,
.hamburger::before,
.hamburger::after {
  //background: var(--clr-accent);     <--- original
  background-color: var(--clr-ham-toggl);
  width: 2em;
  height: 3px;
  border-radius: 1em;
  transition: transform 250ms ease-in-out;
}

.to('.hamburger', {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
.to(CSSRulePlugin.getRule('.hamburger::before'), {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
.to(CSSRulePlugin.getRule('.hamburger::after'), {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)

非常感谢，如果有人能指出正确的方向。

编辑：所以，它现在通过自己的变量工作。像这样：

<button class="nav-toggle" aria-label="toggle navigation">
      <span class="hamburger"></span>
    </button>

.to('.nav-toggle', {"--clr-ham-toggl": "#f6f6f6"}, duration * 0.5)

Answer 1

这里有几个问题。首先，您尝试获取 backgroundColor 的规则，但在 CSS 中您有一个 background 的规则。您应该为相同的规则设置动画，这样规则就不会发生冲突。

其次，您正在应用 CSS 过渡，但随后尝试使用 GSAP 对其进行动画处理。这会导致性能问题，因为转换会在不需要时尝试应用每个更新。

此外，我强烈建议您使用 GSAP 的默认设置，因为它使使用时间轴更加容易。

将这些更改放在一起，it animates！

然而，正如上面评论中提到的，我们 GreenSock 目前在大多数情况下不建议您使用 CSSRulePlugin 来为伪元素设置动画，因为 CSS 变量更容易动画并有 pretty good support. If the support is good enough for your use case use this approach instead.

仅供参考，您更有可能在 the GreenSock forums 上获得更快的回复。

GSAP CSSRulePlugin 颜色不切换回来

GSAP CSSRulePlugin color not switching back

gsap