Tutorial peralihan CSS

Peralihan CSS membolehkan perubahan hartanah yang lancar dengan kod minimum, sesuai untuk kesan hover dan maklum balas interaktif. 1. Gunakan Peralihan Sintaks: Kelewatan Tempoh Tempoh Tempoh Harta; Untuk menentukan peralihan, seperti peralihan: latar belakang warna 0.3s mudah 0.1s;. 2. Nyatakan Peralihan-Harta untuk harta CSS untuk menghidupkan, lebih suka warna latar belakang, kelegapan, atau mengubah sifat yang tidak berubah-ubah seperti paparan. 3. Tetapkan jangkauan peralihan untuk mengawal panjang animasi, seperti 0.3s, yang diperlukan untuk peralihan untuk dijalankan. 4. Memohon fungsi-fungsi peralihan seperti mudah, linear, atau padu-bezier () untuk menentukan pacing. 5. Gunakan peralihan-kelewatan untuk melambatkan permulaan, contohnya 0.1s. 6. Senaraikan pelbagai peralihan dengan koma untuk kesan kompleks. 7. Mengutamakan transformasi dan kelegapan untuk pecutan GPU dan prestasi yang lebih baik. 8. Simpan tempoh antara 200-500ms untuk rasa responsif. 9. Elakkan Peralihan: Semua 0.3s; untuk mengelakkan animasi yang tidak diingini. 10. Jangan menghidupkan sifat susun atur seperti lebar atau ketinggian pada unsur -unsur besar untuk mengelakkan jank. 11. Gantikan toggles paparan dengan kelegapan dan penunjuk-peristiwa untuk kesan lancar/menyembunyikan kesan, seperti dalam .fade {opacity: 0; Peralihan: Kelegapan 0.3s mudah; Pointer-events: Tiada; } dan .fade.active {opacity: 1; Pointer-events: Auto; }. 12. Gunakan singkat untuk ketenangan atau panjang untuk kejelasan. 13. Pastikan harta CSS sebenarnya mengubah keadaan (contohnya, melalui: hover atau perubahan kelas) untuk mencetuskan peralihan. Apabila diterapkan dengan betul, peralihan CSS mencipta interaksi cepat, halus, dan pelaku yang meningkatkan pengalaman pengguna tanpa JavaScript.

Peralihan CSS adalah cara mudah untuk mengawal kelajuan animasi apabila menukar sifat CSS - sesuai untuk kesan hover, keadaan butang, atau perubahan susun atur. Anda tidak memerlukan javascript atau kerangka kunci yang kompleks. Hanya beberapa baris CSS, dan anda mendapat maklum balas visual yang lancar.

Inilah cara menggunakannya dengan berkesan.

Apakah peralihan CSS?

transition CSS membolehkan anda menentukan bagaimana harta harus berubah dari semasa ke semasa apabila ia beralih dari satu nilai ke yang lain - seperti ketika pengguna melayang ke atas butang. Ia bukan animasi dalam pengertian tradisional, tetapi interpolasi yang lancar antara dua negeri.

Sintaks asas:

 Peralihan: Kelewatan Tempoh Tempoh Tempoh Harta;

Contoh:

 butang {
  latar belakang warna: biru;
  Peralihan: Latar belakang warna 0.3s mudah 0.1s;
}

butang: hover {
  latar belakang warna: merah;
}

Ini menjadikan perubahan warna latar belakang dari biru ke merah melebihi 0.3 saat, dengan kelewatan 0.1s sedikit dan lengkung masa "mudah".

Sifat peralihan utama

Anda tidak perlu menetapkan semua nilai setiap kali - kebanyakan boleh ditinggalkan dan akan kembali kepada mungkir.

• transition-property
  Yang harta CSS untuk menghidupkan. Yang biasa: background-color , opacity , transform , width , color .
  Gunakan all untuk menghidupkan mana -mana harta yang berubah (tidak disyorkan untuk prestasi).

• transition-duration
  Berapa lama animasi mengambil (misalnya, 0.5s atau 500ms ). Mesti ditentukan, atau peralihan tidak akan berjalan.

• transition-timing-function
  Mengawal pacing. Pilihan termasuk:

  • ease (lalai, mula perlahan, berakhir perlahan)
  • linear (kelajuan malar)
  • ease-in , ease-out , ease-in-out
  • cubic-bezier(x1, y1, x2, y2) -Kurva tersuai

• transition-delay
  Berapa lama menunggu sebelum bermula (misalnya, 0.2s ).

Anda juga boleh menetapkan pelbagai peralihan:

 butang {
  Peralihan: 
    Latar belakang warna 0.3s mudah,
    Ubah 0.2s linear,
    Opacity 0.4s mudah-dalam-keluar;
}

Amalan dan Petua Terbaik

Tidak semua sifat boleh dialihkan - hanya mereka yang mempunyai nilai interpolatable (nombor, warna, panjang). Sebagai contoh, anda tidak boleh display: none yang block , tetapi anda boleh pudar dengan opacity dan visibility .

✅ Lakukan ini:

• Gunakan transform dan opacity untuk Prestasi Terbaik (GPU-Accelerated).
• Simpan tempoh pendek (200-500ms) untuk rasa responsif.
• Tambah peralihan ke elemen interaktif (butang, pautan) untuk maklum balas.

❌ Elakkan:

• transition: all 0.3s; - Ia boleh menghidupkan sifat yang tidak diingini.
• Animasi susun atur seperti width , height , atau margin pada unsur -unsur besar (boleh menyebabkan jank).
• Menggunakan peralihan pada display atau z-index -mereka tidak interpolasi.

Contoh butang lancar berlegar:

 .btn {
  Padding: 10px 20px;
  Latar Belakang: #007BFF;
  Warna: Putih;
  Sempadan: Tiada;
  Radius sempadan: 4px;
  Peralihan: Semua 0.3s mudah;
  kursor: penunjuk;
}

.btn: hover {
  Latar Belakang: #0056B3;
  Transform: Translatey (-2px);
  Box-shadow: 0 4px 8px RGBA (0,0,0,0.2);
}

Shorthand vs Longhand

Gunakan singkat untuk kesederhanaan:

 Peralihan: Latar belakang warna 0.3s mudah;

Atau Longhand untuk kejelasan:

 Peralihan-Propers: Latar Belakang-warna;
Peralihan Peralihan: 0.3s;
Peralihan-fungsi-fungsi: kemudahan;
Peralihan-kelewatan: 0s;

Shorthand lebih biasa dan ringkas.

Apabila peralihan tidak berfungsi - perbaikan biasa

• Lupa duration ? Peralihan tidak akan berjalan jika tiada masa ditetapkan.
• Harta tidak berubah? Peralihan hanya mencetuskan apabila nilai berubah (contohnya, hover, togol kelas).
• Menggunakan display atau visibility ? Ini tidak menghidupkan lancar-gunakan penunjuk- opacity pointer-events sebaliknya.

Contoh untuk menunjukkan/bersembunyi:

 .fade {
  Kelegapan: 0;
  Peralihan: Kelegapan 0.3s mudah;
  Pointer-events: Tiada;
}

.fade.active {
  Kelegapan: 1;
  Pointer-events: Auto;
}

Pada asasnya, peralihan CSS adalah untuk pergi ke interaksi yang halus, pelaku. Pastikan mereka fokus, cepat, dan sifat yang penting. Sebaik sahaja anda mendapat gantung, anda akan menambahnya di mana -mana - butang, menu, ikon, kad. Mereka membuat tapak statik berasa hidup.

Atas ialah kandungan terperinci Tutorial peralihan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!