rree リーリー
私がやりたいのは、入力アニメーションを使用してユーザーにテキストを 1 行ずつ上から下に表示することです。多くのことを試しましたが、keyframe 要素ごとに異なる p.text を定義する以外の解決策が見つかりません。 p.text 要素が 17 個あるため、コードはスパゲッティのように見えます。私は何をしますか？
keyframe
p.text
この問題の codepen リンクは次のとおりです: https://codepen.io/mehmetguduk/pen/RwJqzpN
各行に手動で遅延を適用する必要があります。 SCSS の場合、これを行うコード スニペットの例は、@for ループを使用し、インデックスにアニメーションの継続時間を乗算することです。
@for
もちろん、完璧なタイミングを実現するには追加の調整が必要になりますが、この問題を解決する方法の大まかなアイデアは得られるはずです。
アニメーションの状態も both に設定されていることを確認してください。これにより、テキストは最初は非表示になり、アニメーションが終了した後も表示されたままになります。
both
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
各行に手動で遅延を適用する必要があります。 SCSS の場合、これを行うコード スニペットの例は、
リーリー@forループを使用し、インデックスにアニメーションの継続時間を乗算することです。もちろん、完璧なタイミングを実現するには追加の調整が必要になりますが、この問題を解決する方法の大まかなアイデアは得られるはずです。
アニメーションの状態も
＃＃＃編集：＃＃＃bothに設定されていることを確認してください。これにより、テキストは最初は非表示になり、アニメーションが終了した後も表示されたままになります。JavaScript を使用して、次のようにアニメーションの遅延を設定することもできます:
リーリー