在CSS varabiles上使用GSAP（TweenMax）

debugcn 发表于 Dev

安库什

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

例如：
若要更改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-property）周围的引号-但是，这导致在invalid tween value开发者控制台上没有任何更改/动画和错误消息。

所以问题是：如何使用TweenMax（GSAP）对自定义CSS变量进行动画处理？

谢谢你的帮助：）

编辑：

我尝试通过使用类

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

但这改变了元素样式，就像我在css中用a声明了它一样

SomeElement:hover {}

样式（因为它没有动画，所以请立即更改）

布莱克·鲍恩（Blake Bowen）

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-25

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章