1

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

例如：
要更改I would 但是当我尝试为 css 变量设置动画时会成为一个问题，该变量someCssProperty采用. 我曾尝试使用 （显然给了我错误）并且我也尝试使用 （引号引起来） - 但是这导致开发人员控制台上没有更改/动画和错误消息。someElement
TweenMax.to(someElement, 1, someCssProperty: "value");
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-propertyinvalid tween value

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

谢谢你的帮助 ：）

编辑：

我尝试过通过

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

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

SomeElement:hover {}

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

4

1 回答 1

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/" />

于 2016-07-09T17:11:44.417 回答