Peralihan CSS terhuyung -huyung

Melaksanakan visual yang menarik apabila elemen melayang, seperti elemen bergerak, sangat mudah. Tetapi jika terdapat banyak item senarai dan anda mahu pergerakan setiap item senarai mempunyai masa animasi yang saling berinteraksi, bagaimanakah anda dapat mencapainya?

Kod berikut menunjukkan bagaimana untuk mencapai kesan animasi interleaved melalui atribut transition-delay . Pertama, kami memilih setiap item senarai dan menggunakan masa kelewatan yang berbeza:

 @media (hover: hover) {
  .list li rentang {
    Transform: Translate (100px);
    Peralihan: 0.2s;
  }
  .list: hover span {
    Transform: Translate (0);
  }
  .list li: nth-child (1) span {
    Peralihan-kelewatan: 0s;
  }
  .list li: nth-child (2) span {
    Peralihan-kelewatan: 0.05s;
  }
  .list li: nth-child (3) span {
    Peralihan-kelewatan: 0.1s;
  }
  .list li: nth-child (4) span {
    Peralihan-kelewatan: 0.15s;
  }
  .list li: nth-child (5) span {
    Peralihan-kelewatan: 0.2s;
  }
  .list li: nth-child (6) span {
    Peralihan-kelewatan: 0.25s;
  }
}

Untuk kawalan latensi yang lebih fleksibel, anda boleh menggunakan CSS untuk menyesuaikan sifat:

 @media (hover: hover) {
  .list {
    --elay: 0.05s;
  }
  .list li rentang {
    Transform: Translate (100px);
    Peralihan: 0.2s;
  }
  .list: hover span {
    Transform: Translate (0);
  }
  .list li: nth-child (n) span {
    Peralihan-kelewatan: calc (var (-kelewatan) * (n-1));
  }
}

Kaedah ini menggunakan fungsi calc() untuk mengira masa kelewatan secara dinamik, menjadikan kod lebih mudah dan mudah untuk skala. n mewakili nombor urutan item senarai.

Jika item senarai besar, kaedah di atas mungkin kelihatan berlebihan. Anda boleh menggunakan SASS Loop untuk menjana kod:

 @media (hover: hover) {
  .list li rentang {
    Transform: Translate (100px);
    Peralihan: 0.2s;
  }
  .list: hover span {
    Transform: Translate (0);
  }
  @for $ i dari 0 hingga 20 {
    .list li: nth-cand (https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b {$ i 1}) span {
      Peralihan-kelewatan: 0.05s * $ i;
    }
  }
}

Gelung kod SASS ini untuk menjana atribut transition-delay 21 item senarai. Walaupun terdapat kurang daripada 21 item senarai, kod berlebihan akan dikurangkan dengan berkesan selepas pemampatan GZIP.

Akhirnya, anda juga boleh lulus nilai kelewatan dari HTML:

• Ini
• Sedikit

@media (hover: hover) {
  .list li rentang {
    Transform: Translate (100px);
    Peralihan: 0.2s;
  }
  .list: hover span {
    Transform: Translate (0);
    Peralihan-kelewatan: var (-kelewatan); /* Dapatkan nilai kelewatan dari html*/
  }
}

Kaedah yang mana untuk dipilih bergantung kepada keperluan khusus projek dan keutamaan peribadi. Kaedah gelung SASS mempunyai kelebihan dalam mengekalkan dan berskala, sementara kaedah atribut tersuai lebih ringkas dan fleksibel. Ia juga mudah untuk ditetapkan secara langsung dalam HTML, tetapi mungkin tidak begitu mudah untuk penyelenggaraan.

Atas ialah kandungan terperinci Peralihan CSS terhuyung -huyung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!