GSAP CSSRulePlugin 颜色没有切换回来答案

【问题标题】：GSAP CSSRulePlugin color not switching backGSAP CSSRulePlugin 颜色没有切换回来
【发布时间】：2020-07-08 00:44:03
【问题描述】：

我创建了一个汉堡菜单切换，我试图让它在“黑暗模式”处于活动状态时改变它的颜色。不幸的是，它不是很有效。

伪元素一旦改变就不会切换回来。 '.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)

【问题讨论】：

嘿托拜厄斯。如果还没有看到您的样式表，我们就不可能知道出了什么问题。如果您需要帮助调试您的项目，请创建一个最小、完整且可验证的演示。顺便说一下，我们 GreenSock 建议使用 CSS 变量而不是 CSSRulePlugin，如果它们有足够好的浏览器支持来满足您的需求。
谢谢。添加了特定的css。好吧，我读到伪元素需要这个插件。我没有先尝试，没有成功。所以，我可以简单地为 .hamburger 背景分配一个变量 soley 并引用它而不是“.hamburger, .hamburger::before, .hamburger::after”？因为，我想我也试过了。谢谢你的提示。会再调查一次？？？？

标签： gsap

【解决方案1】：

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

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

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

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

但是，正如上面评论中提到的，我们 GreenSock 不建议您在大多数情况下使用 CSSRulePlugin 来为伪元素设置动画，因为 CSS 变量更容易动画化并且具有 pretty good support。如果支持对您的用例来说足够好，请使用this approach instead。

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

【讨论】：