問題タブ [css-variables]

私は本当に 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 変数をアニメーション化するにはどうすればよいかということです。

助けてくれてありがとう:)

編集：

クラスを使用してみました

しかし、これは要素のスタイルを、cssで宣言したかのように変更しました

スタイル（アニメーションではなく、すぐに変更されるだけです）

CSS 変数を使用して動的パスを生成しようとしています。

例：

これは not-found module'var(--hpe-fonts-path'で失敗しています。これは webpack ログです:

ポインタはありますか？

私はcurrentColorあまり頻繁に使用しませんが、使用するときは非常に便利です。

だから私は、CSS 変数の登場に少し興奮していました。

信号機を取りましょう。

注：日本の信号機は赤→オレンジ→青と変化しますので、ご安心ください。私は信じがたいことを知っています。青い光が緑に見えるのは知っています。しかし、そうではありません、それは青いです。

さて、賢いことは

現在の値が何であれ、それを読み取り、それcolorを使用するだけです。

対照的に...

別のスタイル宣言の現在の値を参照することはできませんね。

したがって、4 つの変数を設定する必要があります (color:上記のスタイルで 4 回宣言する必要があるのと同じように)。

そして...後でこれらの異なる変数をそれぞれ参照する必要があります。これは、background-color変数ごとに異なる宣言を意味します。

本当？！

それは正しくありません。私は何かを逃しましたか？

で再現currentColorする方法はありませんvar(--current-color)か？

CSS 変数が別のスタイル宣言の現在の値を表す方法はありませんか?

以下の問題は and を使用<img />してPHP(またはjavascriptそれについても) 解決できることはわかっていますが、可能であれば だけを使用して解決したいと考えていCSSます。

言語メニューをマークアップしました。このメニューでは、各名前付き言語の横にフラグ アイコンを表示したいと考えています。

理想的には、新しい言語を追加するたびに、CSS に新しい行を追加する必要がないようにしたいと考えています。

しかし、attr()またはCSSカスタムプロパティまたはその他の方法を使用して、(eg)class="fr"とだけを使用してブラウザに各リスト項目の正しい背景画像を導出させる方法はありdata-language="fr"ますか?

注意: これが CSS の現在の機能を超えることに対しては十分に準備ができていますが、これにアプローチする独創的な方法があるかどうかを知りたいと思っています。

追加情報：

私の最初のアプローチは、フラグ アイコンの角を丸くすることができなかったため、不適切でした。

しかし、私が目指していることを達成する可能性がここにある場合は、丸みを帯びたコーナーを飛ばして喜んでいます.

例：

これがレンダリングされると、計算された CSS は文字通りその値になります。

計算された値をフォールバックとして挿入するポスト プロセッサを使用している場合でも、値自体は文字列ではないため、content.

今週、私は CSS3 変数の素晴らしさを発見しました! 彼らを愛する！

私の質問...これらの変数を JavaScript で取得/設定する方法はありますか?

私のブラウザーが CSS プロパティからのネイティブ実装を持っている場合、CSS 変数でできるように、ミックスインを操作するためのある種の Javascript API が必要です。

私はそれをグーグルで検索しましたが、悲しいことに、cssをjavascriptとミックスインするための何らかのハックを備えたcssフレームワークに遭遇したほとんどの場合、悲しいことに、それに関するAPIドキュメントが見つかりませんでした。誰かがそれを行う方法を知っていますか?

HTMLElement.styleはAPI を持つCSSStyleDeclarationですが、setProperty メソッドしか見つけることができず、setMixin メソッドを見つけることができません。

進捗：

スタイル属性に追加すると@apply --some-mixin;、ミックスインは適用されません。カスタムインラインCSSを作成してドキュメントに追加する必要があると思いますが、これはまだハックな方法であり、機能していません。

ここにテスト用のスニペットがありますが、mixin の動作を確認するには、ブラウザーで実験的な Web プラットフォーム機能をアクティブにする必要があることに注意してください。

新しいブロガー テンプレートを設計しています。variable の値を変更することで、テンプレート全体の色を同時に簡単に変更できるようにしたいので、次の行を使用しました。

残念ながら、プレフィックスを使用したにもかかわらず、Edge ブラウザーでは機能しません。

一連の要素に次の css があります。

回転変換は正常に機能していますが、スケーリングが開始されていません。

...できます。

編集：さらなるテストから、どちらか半分を取り出すと、それぞれが別々に機能します：

両方の css 変数ビットが存在する場合にのみ失敗します。

それで、css変数しか使用できないという制限はありますか、それとも他に何か不足していますか?