React とインライン CSS を使用した Apple アニメーションの問題

Question

HTML と CSS、インライン スタイルと TypeScript を使用して、React でこのアニメーションを再作成しようとしています。スタイル情報を含むオブジェクトを作成し、それを style 属性で参照しています。以下はコードです。動作しません。何が間違っているのかわかりません。スタイルが正しく定義および参照されていないのではないかと思います。

これは私が書き直そうとした元の Codepen の例です: Apple アニメーション

これは私のコードです

ああああ

Answer 1

styled-components を使用して、コンポーネントの柔軟性と互換性を高めることができます。 styled-components を使用して codepen の例をコピーし、簡単に拡張できるようにしました。

したがって、

TopAnimateBlock と BottomAnimateBlock の両方には、ブロック内の行数を示す numOfLine プロパティがあります。 BottomAnimateBlock の 2 番目のプロパティは layTopLine です。これは、先頭の OK を待つ必要があるため、TopAnimateBlock の numOfLine と同じ番号にする必要があります。遊ぶために。

さらに、

TextStyle の color プロパティを使用してテキストの色を簡単に変更し、色の値 HEX color または rgba( ) / hsla()。

TextAnimation.tsx

リーリー

2 行ではなく 3 行をアニメーション化したい場合は、単に追加/変更します:

新しい
1. TextStyle コンポーネントを追加します
TopAnimateBlock
2. の numOfLine を 2 から 3 に、BottomAnimateBlock の layTopLine を 2 から 3## に変更しました # そして、キーフレームを次のクリップに置き換えます:
リーリー