スタイル付きコンポーネントでの @property の使用: ガイド

Question

アプリケーションでアニメーションを使用したいのですが、SCSS の @property 関数が必要です:

リーリー

スタイル付きコンポーネントでこれを行う方法はありますか?

アニメーションの完全なコードは、https://codepen.io/shshaw/pen/RwJwJJx

にあります。

または、property 関数を使用する必要がないようにこの関数を書き直すにはどうすればよいですか?

Answer 1

私がテストしたところ、投稿されたコードは styled-components で動作するようですが、@property に対するブラウザのサポートはまだ制限されているようです。たとえば、Chrome では動作しますが、現時点では Firefox では動作しないため、グラデーション アニメーションは Firefox では再生されません。

#@property を使用せずに、投稿されたコードの代替バージョンを作成してみました。Firefox でも動作します。役立つ場合は、デモをご覧ください: stackblitz (コードは回答の最後に含まれています)。 < /a>

最初に投稿されたコードは、次の例を使用してテストされました:

stackblitz (Firefox は現在、< /a>@property のグラデーション アニメーションをサポートしていません)。 リーリー

以下は、比較のために

@property を含まない代替バージョンです。これは、疑似要素を使用し、子 div を追加して、 styled-components でアニメーションを再作成します。

ライブデモ:

stackblitz (Firefox でも動作するはずです)。 リーリー ちなみに、

@property は新しい標準 CSS です。 @property の詳細な背景情報については、MDN を参照してください。