Sembunyikan bar skrol semasa animasi

CSS masih tidak boleh bernyawa dengan saiz automatik.

 .dropdown {
  Peralihan: 0.2s;
  ketinggian: 0;
}
.dropdown.open {
  /* Ketinggian akan berubah, tetapi tidak akan animasi. */
  ketinggian: auto;
}

Anda boleh mencuba helah JavaScript. Brandon Smith tidak lama dahulu menggariskan beberapa teknik di sini. Saya telah memikirkan penyelesaian ini kerana sangat mudah:

 .dropdown {
  Peralihan: 0.2s;
  Max-Height: 0;
}
.dropdown.open {
  /*? */
  Max-Height: 400px;
}

Sekarang kita mempunyai nombor sihir 400px ini, ia benar -benar tidak sesuai. Walau bagaimanapun, hakikat bahawa kaedah ini berfungsi dan begitu mudah menjadikannya sangat menarik bahawa saya selalu menggunakannya dalam persekitaran pengeluaran.

Tetapi nombor ajaib bukan satu -satunya masalah. Satu lagi masalah ialah bar scroll.

Apabila kita menetapkan max-height: 0; kita juga memerlukan overflow: hidden; Untuk memastikan menu dropdown sebenarnya tersembunyi apabila ditutup. Apabila menu dropdown dibuka, kita mungkin perlu menggunakan overflow: auto; supaya kita tidak dapat memotong kandungan secara tidak sengaja jika ketinggian semula jadi menu dropdown melebihi max-height yang diperluas. Menggunakan overflow: auto; Menyelesaikan masalah ini, tetapi memperkenalkan masalah lain: Semasa pengembangan, menu drop-down kami akan sentiasa memaparkan bar-bar untuk sekurang-kurangnya sebahagian daripada masa pengembangan, walaupun mereka tidak diperlukan untuk ketinggian pengembangan akhir. Ini memalukan!

Petua CSS datang untuk menyelamatkan.

Kita masih boleh menggunakan overflow: auto; Dalam keadaan yang diperluaskan - kita hanya perlu menulis ganti semasa animasi. Seperti yang kita pelajari dalam pertempuran spesifik CSS yang hebat, @keyframes mempunyai keupayaan yang luar biasa untuk menutup apa -apa semasa mereka aktif. Mari kita gunakannya bukan untuk animasi, tetapi untuk fungsi scrollbar tersembunyi ini:

 .dropdown {
  Max-Height: 0;
  Limpahan: Tersembunyi;
  Peralihan: Max-Height 1.2s mudah-dalam-keluar;
}
.dropdown.open {
  Limpahan: Auto;
  Max-Height: 400px;
  Animasi: Hide-Scroll 1.2s ke belakang;
}
@KeyFrames Hide-Scroll {
  dari, ke {limpahan: tersembunyi; }
}

Itu sahaja!

Cuba menyesuaikan ketinggian ke nilai yang lebih kecil dan lihat bagaimana anda tidak melihat bar skrol semasa animasi, tetapi hanya pada akhirnya jika diperlukan. Ini menyebabkan jitter kecil apabila bar tatal muncul, tetapi dalam kes saya ia boleh diterima kerana ia jarang berlaku. Jika anda benar-benar mahu menghentikan jitter, anda mungkin perlu menggunakan bar skrol (adat) ke menu lungsur dan boleh menyesuaikan gaya bar skrol semasa animasi yang diperlukan.

Terima kasih kepada Encik Stephen Shaw dari @KeyFramers untuk helah ini. Semasa saya sedang mengerjakan sesuatu di Codepen, saya menariknya untuk membantu saya menyelesaikan masalah ini. Kami memutuskan untuk mengubah helah ini menjadi video Codepen Channel, menunjukkan mod kerjasama, dan kami menggunakannya untuk mencari masalah/penyelesaian:

Atas ialah kandungan terperinci Sembunyikan bar skrol semasa animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!