アプリケーションでアニメーションを使用したいのですが、SCSS の @property 関数が必要です:
スタイル付きコンポーネントでこれを行う方法はありますか?
アニメーションの完全なコードは、https://codepen.io/shshaw/pen/RwJwJJx
または、property 関数を使用する必要がないようにこの関数を書き直すにはどうすればよいですか?
property
私がテストしたところ、投稿されたコードは styled-components で動作するようですが、@property に対するブラウザのサポートはまだ制限されているようです。たとえば、Chrome では動作しますが、現時点では Firefox では動作しないため、グラデーション アニメーションは Firefox では再生されません。
styled-components
@property
#@property を使用せずに、投稿されたコードの代替バージョンを作成してみました。Firefox でも動作します。役立つ場合は、デモをご覧ください: stackblitz (コードは回答の最後に含まれています)。
を使用せずに、投稿されたコードの代替バージョンを作成してみました。Firefox でも動作します。役立つ場合は、デモをご覧ください:
stackblitz (Firefox は現在、@property のグラデーション アニメーションをサポートしていません)。 リーリー
のグラデーション アニメーションをサポートしていません)。
@property を含まない代替バージョンです。これは、疑似要素を使用し、子 div を追加して、 styled-components でアニメーションを再作成します。
を含まない代替バージョンです。これは、疑似要素を使用し、子
を追加して、
でアニメーションを再作成します。
stackblitz (Firefox でも動作するはずです)。 リーリー ちなみに、
@property は新しい標準 CSS です。 @property の詳細な背景情報については、MDN を参照してください。
は新しい標準 CSS です。
の詳細な背景情報については、
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
私がテストしたところ、投稿されたコードは
styled-componentsで動作するようですが、@propertyに対するブラウザのサポートはまだ制限されているようです。たとえば、Chrome では動作しますが、現時点では Firefox では動作しないため、グラデーション アニメーションは Firefox では再生されません。#@property
最初に投稿されたコードは、次の例を使用してテストされました:を使用せずに、投稿されたコードの代替バージョンを作成してみました。Firefox でも動作します。役立つ場合は、デモをご覧ください:stackblitz (コードは回答の最後に含まれています)。stackblitz (Firefox は現在、@property
以下は、比較のためにのグラデーション アニメーションをサポートしていません)。リーリー@property
ライブデモ:を含まない代替バージョンです。これは、疑似要素を使用し、子divを追加して、styled-componentsでアニメーションを再作成します。stackblitz (Firefox でも動作するはずです)。 リーリー ちなみに、
@property
は新しい標準 CSS です。@propertyの詳細な背景情報については、MDN を参照してください。