問題タブ [css-variables]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - CSS カスタム プロパティを使用した簡単なスクロール ベースのアニメーション
カスタム css プロパティのサポートが広まりつつある今、スクロール ベースのアニメーションの作成を簡素化するためにそれらを使用することを念頭に置いていました。Javascript では、style.setProperty('--customProperty', value) を使用して、ユーザーがスクロールするときに特定の要素のカスタム プロパティを調整しています。
Chrome、Firefox、Safari 10 で美しく動作します。
しかし、(カスタム プロパティをサポートしている) Safari 9.1 では、プロパティを1 回しか設定できません。設定後、新しい値に更新されることはありません。
私はCodePenでそれをすべて持っています: https://codepen.io/kirkhadden/pen/JJbXmE/
この動作に関する情報も言及も見つかりません。Safari で style.setProperty() の他のより単純な使用法をテストしましたが、プロパティが設定されると、最初にプロパティを削除しようとしても、Safari が同じプロパティを更新しないことが引き続きわかりました。
これは Safari 9.1 のバグですか? 回避策はありますか? javascript を使用して css 変数を設定する別の方法はありますか?
アップデート
したがって、style.setProperty の代わりに、jQuery の .attr() メソッドを使用してプロパティを設定できます。他のスタイル プロパティが上書きされるため、理想的ではありませんが、この場合は機能します。
より大きな問題は、このソリューション全体が、アニメーション化されたすべての要素に通常の css アニメーションを設定するという考えに基づいていることですが、再生状態を「一時停止」に設定し、javascript を使用してスクロール位置に応じてアニメーション遅延を操作します。 . これにより、継承を利用して、最小限の DOM 操作で多くのものをアニメーション化できます。
繰り返しますが、Safari 9.1 は障害です。Chrome や Firefox とは異なり、再生状態が「一時停止」の場合、Safari はアニメーションをまったく開始せず、アニメーションの遅延を無視するように見えるためです。
css - CSS 変数を Sass 関数の引数として使用する
lighten などの Sass 関数で CSS 変数を使用する方法はありますか? このようなもの：
「引数は色$colorでなければなりません」というエラー メッセージが表示されます。lighten($color, $amount)
js で使用する必要があるため、CSS (Sass ではなく) 変数を使用しています。