Chuyển đổi chiều cao từ 0 sang tự động bằng CSS

Chuyển đổi chiều cao mượt mà từ 0 sang tự động bằng CSS

CSS và HTML

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: 100px; /* Set this to the max height you expect */
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

Giải pháp JavaScript để chuyển đổi chiều cao mượt mà

HTML, CSS và JavaScript

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>
<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  parent.addEventListener('mouseenter', () => {
    child.style.height = child.scrollHeight + 'px';
  });
  parent.addEventListener('mouseleave', () => {
    child.style.height = '0';
  });
</script>

Chuyển đổi chiều cao mượt mà bằng cách sử dụng biến CSS

CSS và HTML

<style>
  :root {
    --max-height: 100px;
  }
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: var(--max-height);
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

Câu hỏi thường gặp về chuyển tiếp CSS và hoạt ảnh

1. Làm cách nào tôi có thể chuyển đổi chiều cao từ 0 sang tự động bằng CSS?
2. Để đạt được điều này, bạn có thể sử dụng kết hợp chiều cao cố định và số 8 để tự động đặt giá trị chiều cao. Các giải pháp CSS thuần túy bị hạn chế vì height: auto không thể hoạt hình trực tiếp được.
3. Sự khác biệt giữa chuyển tiếp và hoạt ảnh trong CSS là gì?
4. Chuyển đổi CSS cung cấp một cách để thay đổi giá trị thuộc tính một cách trơn tru (trong một khoảng thời gian nhất định) từ trạng thái này sang trạng thái khác, thường là khi thay đổi trạng thái như di chuột. Hoạt ảnh CSS cho phép tạo ra các chuỗi phức tạp hơn bằng cách sử dụng khung hình chính để xác định trạng thái và thời gian.
5. Tôi có thể sử dụng chuyển tiếp CSS cho các phần tử có chiều cao động không?
6. Có, nhưng bạn thường cần tính toán trước độ cao hoặc sử dụng JavaScript để tự động đặt giá trị độ cao nhằm chuyển đổi suôn sẻ.
7. Mục đích của việc này là gì overflow: hidden; thuộc tính trong quá trình chuyển đổi CSS?
8. Các overflow: hidden; Thuộc tính được sử dụng để ẩn bất kỳ nội dung nào vượt quá ranh giới của phần tử, điều này rất cần thiết cho quá trình chuyển đổi rõ ràng liên quan đến thay đổi chiều cao.
9. Làm thế nào để keyframes hoạt động trong hoạt ảnh CSS?
10. Keyframes trong hoạt ảnh CSS cho phép bạn xác định trạng thái của một phần tử tại các điểm khác nhau trong hoạt ảnh. Bạn có thể chỉ định các thuộc tính và giá trị của chúng tại mỗi khung hình chính, tạo các hình ảnh động phức tạp.
11. Tôi có thể kết hợp chuyển tiếp CSS và hoạt ảnh không?
12. Có, việc kết hợp chuyển tiếp CSS và hoạt ảnh có thể mang lại trải nghiệm người dùng phong phú hơn bằng cách xử lý cả các thay đổi trạng thái và hoạt ảnh liên tục.
13. Là gì scrollHeight trong JavaScript?
14. scrollHeight trả về tổng chiều cao của một phần tử, bao gồm cả nội dung không hiển thị trên màn hình do tràn. Nó rất hữu ích cho việc tính toán độ cao động để chuyển tiếp suôn sẻ.
15. Làm thế nào animation-delay công việc?
16. Các animation-delay thuộc tính chỉ định thời điểm hoạt ảnh sẽ bắt đầu. Nó cho phép bạn sắp xếp nhiều hình ảnh động để tạo hiệu ứng xếp lớp.
17. Tại sao lại là :root được sử dụng trong CSS?
18. Các :root lớp giả nhắm vào phần tử gốc của tài liệu. Nó thường được sử dụng để xác định các biến CSS toàn cục có thể được sử dụng lại trong toàn bộ biểu định kiểu.

Suy nghĩ cuối cùng về quá trình chuyển đổi chiều cao suôn sẻ

Để đạt được sự chuyển đổi mượt mà từ độ cao 0 sang tự động trong CSS đòi hỏi phải có sự kết hợp của nhiều kỹ thuật. Mặc dù CSS thuần túy mang lại sự đơn giản nhưng nó bị hạn chế bởi nhu cầu về độ cao được xác định trước. Bằng cách tích hợp JavaScript, bạn có thể tính toán và đặt độ cao một cách linh hoạt, mang lại sự chuyển đổi liền mạch. Việc sử dụng các biến CSS cũng có thể mang lại một cách tiếp cận linh hoạt để quản lý các giá trị động. Việc kết hợp các phương pháp này cho phép nhà phát triển tạo ra nhiều trải nghiệm web tương tác và hấp dẫn hơn mà không có những thay đổi đột ngột thường liên quan đến chuyển đổi độ cao.