Chuyển tiếp CSS là một cách tuyệt vời để tạo ra sự tương tác. Đủ rồi, transition về trạng thái ban đầu của một phần tử và trình duyệt sẽ tạo hiệu ứng chuyển đổi giữa hai trạng thái. Chuyển đổi cho kích thước phần tử nội tại như auto Tuy nhiên, đây là một vấn đề đối với các nhà phát triển web trong nhiều thập kỷ và lựa chọn duy nhất là tính toán động chiều cao bằng JavaScript.
Một thách thức khác là bắt đầu chuyển đổi khi một phần tử có kiểu đầu tiên - chẳng hạn như khi được thêm vào DOM hoặc khi display-giá trị của none những thay đổi. Bài viết này giải thích cách giải quyết vấn đề này bằng các tính năng CSS mới như calc-size(), interpolate-size, @starting-style và transition-behavior có thể được quản lý.
Giải pháp với calc-size()
Nếu một phần tử có phần tử DOM xuất phát từ trạng thái đóng (height: 0) sang trạng thái mở (height: auto) đi qua, hoạt ảnh thường không được thực thi, mặc dù transitionThuộc tính được thiết lập. Đó là bởi vì trình duyệt không hỗ trợ chuyển đổi sang kích thước nội tại như auto ủng hộ. Cái mới calc-size()Tuy nhiên, hàm này cho phép tính toán các đại lượng nội tại này và do đó cũng chuyển đổi:
f95f6dcb193aa903adc84ce47bc4a296
Các calc-size()-Chức năng chưa có sẵn trong tất cả các trình duyệt. Có thể đạt được dự phòng bằng cách giữ nguyên bản gốc height: auto-Tuyên bố có thể đạt được.
Giải pháp với interpolate-size
Các interpolate-sizeThuộc tính cho phép bạn đặt hành vi nội suy của trình duyệt và quyết định xem có phân biệt giữa các từ khóa như auto nên nội suy. Theo mặc định, phép nội suy chỉ xảy ra giữa các giá trị số. Với allow-keywords Tuy nhiên, bạn có thể kích hoạt chuyển tiếp giữa các từ khóa:
f95f6dcb193aa903adc84ce47bc4a296
Bởi bạn interpolate-size: allow-keywords trên :rootPhần tử, bạn kích hoạt hành vi mới cho toàn bộ trang.
Chuyển từ display:none
Một vấn đề khác nảy sinh khi một phần tử của display:none chuyển sang trạng thái nhìn thấy được. Ở đó display không phải là thuộc tính có thể hoạt hình, không có hoạt ảnh nào xảy ra. Các hàm CSS mới trợ giúp ở đây @starting-style và transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Với transition-behavior: allow-discrete đảm bảo rằng hoạt ảnh được thực thi trước display-giá trị của block TRÊN none được chuyển đổi. Các quy tắc này cho phép thực hiện chuyển đổi ngay cả trong lần cập nhật kiểu đầu tiên. các @starting-styleQuy tắc đảm bảo rằng hoạt ảnh chạy chính xác trên bản cập nhật kiểu ban đầu.
Hỗ trợ trình duyệt
Hiện tại các tài sản mới calc-size() và interpolate-size chưa được hỗ trợ bởi tất cả các trình duyệt. Trong Chrome, chúng có sẵn sau cờ thử nghiệm, nhưng chưa có trong Safari và Firefox. Tương tự, hỗ trợ cho transition-behavior Có trong Chrome và Edge, nhưng không có trong Safari và Firefox. Hy vọng rằng điều đó sẽ thay đổi trong tương lai.