Bagaimana untuk menetapkan ketinggian peralihan dari 0 kepada automatik menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk menetapkan ketinggian peralihan dari 0 kepada automatik menggunakan CSS?

WBOY

Lepaskan： 2023-09-18 12:29:02

ke hadapan

1646 orang telah melayarinya

Bagaimana untuk menetapkan ketinggian peralihan dari 0 kepada automatik menggunakan CSS?

Mengalih ketinggian daripada 0 kepada "auto" ialah cara untuk menghidupkan ketinggian elemen dengan lancar apabila ia berubah agar sesuai dengan kandungannya. Dalam pembangunan web, mencipta peralihan yang lancar dan elegan boleh menjadikan tapak web lebih menarik dan memberikan pengalaman pengguna yang lebih baik. Walau bagaimanapun, membuat peralihan dari ketinggian 0 kepada "auto" boleh menjadi agak rumit.

Tatabahasa

transition: [property] [duration] [timing-function] [delay];

Salin selepas log masuk

Di sini, property ialah sifat CSS yang ingin kita hidupkan, tempoh ialah tempoh masa yang kita mahu peralihan tamat, fungsi pemasaan menentukan lengkung pemasaan atau kelajuan peralihan, yang menentukan cara animasi memecut dari semasa ke semasa atau nyahpecutan, manakala delay ialah parameter pilihan yang menetapkan jumlah masa untuk menunggu sebelum memulakan peralihan.

Ketinggian peralihan

Dalam CSS, peralihan ialah cara untuk mencipta animasi yang lancar dan dinamik antara dua keadaan elemen. Khususnya, ketinggian peralihan merujuk kepada kesan animasi yang berlaku apabila atribut ketinggian sesuatu elemen berubah, meningkatkan pengalaman pengguna dan menjadikan tapak web lebih menarik.

Sebagai contoh, jika kita ingin mencipta peralihan yang lancar apabila mengembangkan atau meruntuhkan div atau menogol keterlihatan menu lungsur. Kita boleh melakukannya dengan mudah menggunakan sifat peralihan CSS dan sifat ketinggian,

Ketinggian animasi dari 0 kepada "auto"

Apabila kita ingin membuat peralihan dari ketinggian 0 kepada "auto", ia tidak semudah hanya menetapkan sifat ketinggian kepada "auto". Malah, nilai "auto" bukanlah nilai yang sah untuk transformasi CSS. Kita boleh melakukannya dengan mengikuti langkah-langkah di bawah.

Langkah 1: Buat struktur HTML

Untuk membuat peralihan, mula-mula kita memerlukan elemen HTML untuk menggunakannya. Mari kita gunakan div dengan kelas "elemen".

Sebagai contoh -

<div class="element">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
</div>

Salin selepas log masuk

Langkah 2: Tambahkan CSS

Selepas mencipta struktur HTML, kami perlu menambah beberapa CSS untuk membuat peralihan. Kami mula-mula menetapkan ketinggian awal kelas "elemen" kepada 0 dan menyembunyikan limpahan.

Sebagai contoh -

.element {
   height: 0;
   overflow: hidden;
}

Salin selepas log masuk

Ini akan menyembunyikan kandungan di dalam elemen sehingga dikembangkan.

Langkah 3: Tambah Peralihan

Sekarang, kita perlu menambah atribut peralihan pada elemen. Kami menggunakan atribut ketinggian dan menetapkan tempoh dan fungsi pemasaan.

Sebagai contoh -

.element {
   height: 0;
   overflow: hidden;
   transition: height 0.5s ease-in-out;
}

Salin selepas log masuk

Dalam contoh ini, peralihan akan mengambil masa 0.5 saat dan menggunakan fungsi pemasaan mudah keluar, yang bermaksud peralihan akan bermula dengan cepat dan perlahan pada penghujungnya.

Langkah 4: Tetapkan keadaan dikembangkan

Di sini, untuk menetapkan keadaan elemen yang dikembangkan, kami menggunakan kelas pseudo dan menetapkan ketinggian kepada auto.

input[type="checkbox"]:checked~.element {
   height: auto;
}

Salin selepas log masuk

Contoh 1

Berikut ialah contoh penggunaan CSS untuk menetapkan ketinggian peralihan daripada 0 kepada automatik.

<!DOCTYPE html>
<html>
 <head>
   <style>
      body { text-align: center; }
      .element {
         height: 0;
         overflow: hidden;
         transition: height 0.5s ease-in-out;
      }
      input[type="checkbox"]:checked~.element {
         height: auto;
      }
      p { margin: 0;}
   </style>
</head>
   <body>
      <h3>Transitioning height 0 to auto using CSS</h3>
      <input type="checkbox" id="toggle">
      <label for="toggle">Toggle Element</label>
      <div class="element">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
      </div>
   </body>
</html>

Salin selepas log masuk

Contoh 2

Berikut ialah satu lagi contoh menggunakan CSS untuk menetapkan ketinggian peralihan daripada 0 kepada automatik.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center;}
      .box {
         max-height: 0;
         width:200px;
         margin:auto;
         transition: max-height 1.4s ease-out;
         overflow: hidden;
         background: #b2ceed;
      }
      .tab:hover .box {
         max-height: 500px;
         transition: max-height 1s ease-in;
      }
   </style>
</head>
   <body>
      <h2>Transition height 0 to auto using CSS </h2>
      <div class="tab"><b>Hover on me to increase the height.</b>
         <div class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
      </div>
   </body>
</html>

Salin selepas log masuk

Kesimpulan

Mencipta peralihan daripada 0 kepada automatik menggunakan CSS ialah cara yang mudah dan berkesan untuk menambah minat visual pada tapak web anda. Dengan mengikuti langkah-langkah yang digariskan dalam artikel ini, kami boleh mencipta kesan ini dengan mudah dan meningkatkan pengalaman pengguna di tapak web kami.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan ketinggian peralihan dari 0 kepada automatik menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!