Buat animasi menaip berasaskan CSS untuk setiap baris dalam urutan

Question

rreeee

<div class='screen'>
  <div class='text-container'>
    <p class='text'>A problem has been detected and system has been shut down to prevent damage to your computer.
    </p>
    <br />
    <p class='text'>IRQL_NOT_LESS_OR_EQUAL</p>
    <br />
    <p class='text'>If this is the first time you've seen this Stop error screen, restart your computer.</p>
    <p class='text'>If this screen appears again, follow these steps:</p>
    <br />
    <p class='text'>Check to make sure any new hardware or soFtware is properly installed.</p>
    <p class='text'>If this is a new installation,</p>
    <p class='text'>ask your hardware or soFtware manufacturer for any system updates you might need.</p>
    <br />
    <p class='text'>If problems continue, disable or remove any newly installed hardware or soFtware.</p>
    <p class='text'>Disable BIOS memory options such as caching or shadowing.</p>
    <p class='text'>If you need to use Safe Mode to remove or disable components, restart your computer.</p>
    <p class='text'>press F8 to select Advanced Startup options, and then select Safe Mode.</p>
    <br />
    <p class='text'>Technical information:</p>
    <br />
    <p class='text'>*** STOP: 0x0000000A /0x0000000000004A,</p>
    <p class='text'>0x0000000000000002, 0x0000000000000001, 0xFFFFF80002B37ABF</p>
    <br />
    <p class='text'>Collecting data for crash dump ...</p>
    <p class='text'>Initializing disk for crash dump ...</p>
    <p class='text'>Beginning dump of physical memory.</p>
  </div>
</div>

Apa yang saya mahu lakukan ialah memaparkan teks kepada pengguna dengan animasi menaip di sini, baris demi baris, atas ke bawah. Saya mencuba pelbagai cara tetapi tiada apa-apa kecuali setiap elemen p.text 元素定义不同的 keyframe 之外，我找不到其他解决方案。这样我的代码就变成了意大利面条，因为有 17 个 p.text. apa yang saya buat?

Berikut ialah pautan codepen untuk soalan ini: https://codepen.io/mehmetguduk/pen/RwJqzpN

Answer 1

Anda perlu menggunakan kelewatan pada setiap baris secara manual. Untuk SCSS, contoh coretan kod untuk melakukan ini ialah menggunakan gelung @for dan kemudian darabkan indeks dengan tempoh animasi.

@for $i from 0 through 20 {
      p.text:nth-of-type(#{$i + 1}) {
        animation-delay: #{$i * 4}s;
      }
    }

Sudah tentu, ini memerlukan sedikit pengubahsuaian tambahan untuk mencapai masa yang sempurna, tetapi harus memberi anda gambaran kasar tentang cara menyelesaikan masalah ini.

Pastikan keadaan animasi anda juga ditetapkan kepada both, supaya teks disembunyikan pada permulaan dan kekal kelihatan selepas animasi tamat.

Editor:

Anda juga boleh menggunakan JavaScript untuk menetapkan kelewatan animasi seperti berikut:

document.querySelectorAll('p.text').forEach((el, i) => el.style.animationDelay = `${i * 5}s`)