在 css 变量上使用 GSAP (TweenMax)

Question

我非常喜欢 Google 的 Polymer，而且我喜欢 GSAP - 到目前为止，我一直在顺利地将两者结合使用。不幸的是，我现在遇到了一个问题 - 如何将 GSAP（具体来说是 TweenMax）与自定义 css 变量一起使用？

例如：
要更改 someElement 的 someCssProperty，我会
TweenMax.to(someElement, 1, someCssProperty: "value");
但是当我尝试为 css 变量设置动画时， someCssProperty 成为一个问题，该变量采用 --some-custom-css-variable 形式。我试过使用
TweenMax.to(someElement, 1, --some-custom-css-Property: "value");
（显然给我错误）我也尝试使用
TweenMax.to(someElement, 1, "--some-custom-css-Property": "value");
（some-custom-Css-property 周围的引号） - 但是这会导致开发者控制台上没有 change/animation 和 invalid tween value 错误消息。

所以问题是：我如何使用 TweenMax (GSAP) 为自定义 css 变量设置动画？

感谢您的帮助:)

编辑：

我尝试过使用类到

TweenMax.to("SomeElement", 5, {className:"class2"});

但这改变了元素样式，就好像我在 css 中用

声明了它一样

SomeElement:hover {}

风格（因为它没有动画，只是立即改变）

Answer 1

现在，您将不得不使用通用对象手动更新变量。

var docElement = document.documentElement;

var tl = new TimelineMax({ repeat: -1, yoyo: true, onUpdate: updateRoot });
var cs = getComputedStyle(docElement, null);

var blur = {
  value: cs.getPropertyValue("--blur")
};

tl.to(blur, 2, { value: "25px" });

function updateRoot() {
  docElement.style.setProperty("--blur", blur.value);
}

:root {
  --blur: 0px;
}

img {
  -webkit-filter: blur(var(--blur));
  filter: blur(var(--blur));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<img src="http://lorempixel.com/400/400/" />

在 css 变量上使用 GSAP (TweenMax)

Using GSAP (TweenMax) on css varabiles

css-variables

gsap