1

私は本当に Google の Polymer に夢中で、GSAP が大好きです。これまでのところ、2 つを問題なく組み合わせて使用​​しています。残念ながら、私は今問題にぶつかりました - カスタム css 変数で GSAP (具体的には TweenMax) を使用するにはどうすればよいですか?

例:
を変更するsomeCssPropertyにsomeElementは、フォームをとる css 変数をアニメーション化しようとすると問題になり
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 に答える