Transisi ke ketinggian otomatis |. Kiat CSS – Beragampengetahuan

Aku tahu ini yang diinginkan Chris selamanya, jadi tidak mengherankan jika sehari setelah berita itu tersiar, dia sudah menerima artikel yang brilian. Saya sebenarnya pertama kali mengetahuinya dari postingannya, tetapi tidak dapat menemukan pengumuman apa pun. Jadi, saya pikir saya akan mencatat beberapa catatan, karena ini terasa seperti perkembangan besar.

berita: Transisi ke auto Itu penting sekarang! Ya, ini akan menjadi sesuatu. Chrome Canary baru-baru ini menambahkan dukungan untuk itu, yang merupakan satu-satunya tempat Anda dapat menemukannya saat ini. Meski begitu, kami belum mengetahui apakah implementasi Chrome Canary akan menemukan sintaksisnya saat fitur tersebut dirilis secara resmi.

pertanyaan

Situasinya begini. Anda memiliki sebuah elemen. Anda telah menandainya, memasukkan konten, dan menerapkan banyak gaya padanya. Tahukah kamu seberapa tingginya? tentu saja tidak! Tentu saja, kita dapat meminta JavaScript untuk menghitung elemen untuk kita, tetapi sejauh menyangkut CSS, ukuran elemen yang dihitung tidak diketahui.

Hal ini menyulitkan untuk menganimasikan elemen height: 0 tiba height: whatever. Kita perlu mengetahui apa itu “apa pun”, dan kita hanya dapat melakukannya dengan menetapkan ketinggian tetap pada elemen. Dengan cara ini kita memiliki bilangan yang bertransisi dari ketinggian nol ke ketinggian tertentu.

.panel {
  height: 0;
  transition: height 0.25s ease-in;

  &.expanded {
    height: 300px;
  }
}

Namun apa jadinya jika elemen tersebut berubah seiring berjalannya waktu? Mungkin fontnya berubah, kami menambahkan padding, memasukkan lebih banyak konten… apa saja untuk mengubah ukurannya. Kami mungkin perlu memperbarui height: 300px Untuk ketinggian tetap baru mana pun yang terbaik. Inilah sebabnya kita sering melihat JavaScript digunakan untuk mengubah ukuran benda yang mengembang dan menyusut, serta solusi lainnya.

Aku bilang ini tentang height properti, tapi kita juga membahas padanan logis, block-sizeJuga width Dan inline-size. Atau punya arah apa pun!

Transisi ke auto

Itu tujuannya, bukan? cenderung kita capai height: auto Ketika dimensi ketinggian tidak diketahui. Dari sana, kami membiarkan JavaScript melakukan perhitungan dan mendapatkan konten darinya.

Implementasi Chrome saat ini menggunakan CSS calc() Lakukan pekerjaan berat. itu mengenali auto Kata kuncinya, seperti namanya, menghitung angka ini. Dengan kata lain, alih-alih menggunakan pendekatan ketinggian tetap, kita dapat melakukan ini:

.panel {
  height: 0;
  transition: height 0.25s ease-in;

  &.expanded {
    height: calc(auto);
  }
}

Itu benar! tentu, calc() Ia mampu menghasilkan ekspresi yang lebih kompleks, namun fakta bahwa kami dapat memberikannya kata kunci yang tidak jelas tentang tinggi elemen sangatlah mengesankan. Hal ini memungkinkan kita beralih dari nilai tetap ke ukuran intrinsik elemen dan sebaliknya.

Saya harus mencobanya. Saya yakin ada banyak kasus penggunaan di sini, tapi saya menggunakan tombol mengambang di komponen kalender saya yang menunjukkan sejumlah undangan kalender yang tertunda. Klik tombol tersebut dan panel akan meluas di atas kalender dan menampilkan undangan. Klik lagi dan panel akan kembali ke posisi semula. JavaScript menangani interaksi klik, memicu perubahan kelas untuk mengonversi tinggi dalam CSS.

Jika Anda tidak ingin membuka Canary, tonton videonya:

Berikut adalah CSS yang relevan:

.invite-panel {
  height: 0;
  overflow-y: clip;
  transition: height 0.25s ease-in;
}

Saat diklik, JavaScript menyetel tinggi otomatis elemen ke gaya sebaris untuk menggantikan CSS:

<div class="invite-panel" style="height: calc(auto)">

ini transition Properti di CSS memberi tahu browser bahwa kami berencana mengubahnya height Properti di beberapa titik dan membuatnya lancar. Dan, seperti halnya transisi atau animasi apa pun, yang terbaik adalah memperhitungkan sensitivitas gerakan dengan memperlambat atau menghilangkan gerakan prefers-reduced-motion.

tentang apa display: none?

Ini adalah salah satu pertanyaan pertama yang terlintas di benak saya ketika saya membaca postingan Chris, yang juga dia jelajahi. transisi dari elemen display: none Ukuran bawaannya adalah Sedikit seperti dari height: 0. Sepertinya elemen yang tidak ditampilkan memiliki tinggi nol, namun kenyataannya tinggi yang dihitung adalah nol auto Kecuali ketinggian tertentu dinyatakan di atas.

Jadi jika kita ingin memulainya display: none di CSS. Saya cukup memasukkan kode yang dibagikan oleh Chris karena ini menunjukkan bagian-bagian penting dengan baik:

.element {
  /* hard mode!! */
  display: none;

  transition: height 0.2s ease-in-out;
  transition-behavior: allow-discrete;

  height: 0; 
  @starting-style {
    height: 0;
  }

  &.open {
    height: calc(auto);
  }
}

• Elemennya dimulai dengan keduanya display: none Dan height: 0.
• ada satu .open Kelas yang menetapkan tinggi suatu elemen calc(auto).

Ini adalah dua titik yang perlu kita sambungkan, yang kita lakukan dengan pengaturan terlebih dahulu transition-behavior: allow-discrete pada elemen. Ini baru bagi saya tetapi spesifikasinya mengatakan transition-behavior “Menentukan apakah akan memulai transformasi untuk properti diskrit.” allow-discrete“Konversi akan dimulai untuk properti diskrit dan interpolasi.”

Nah, DevTools menunjukkan hal itu kepada kita height: auto Itu adalah atribut terpisah! Melihat @starting-style Namun, pernyataan. Jika Anda tidak terbiasa dengannya, Anda tidak sendirian. Idenya adalah memungkinkan kita mengatur gaya transisi “mulai”. Karena tinggi diskrit elemen kita adalah autokita perlu memberi tahu transisi untuk memulai height: 0 alih-alih:

.element {
  /* etc. */

  @starting-style {
    height: 0;
  }
}

Sekarang kita bisa berpindah dari nol ke auto Karena kami mengesampingkan ketinggian diskrit @starting-style. Keren, kita bisa melakukannya!

Tautan langsung →