Now in Baseline: tạo ảnh động cho hiệu ứng nhập

Una Kravets

Bài đăng về bốn tính năng CSS mới cho hiệu ứng nhập và thoát đã chia sẻ một số tính năng hữu ích vừa có trong Chrome. Giờ đây, hai trong số các tính năng này, @starting-style và chuyển đổi-hành vi: cho phép-discrete đã trở thành Cơ sở mới có sẵn khi phát hành Firefox 129. Giờ đây, bạn có thể tạo hiệu ứng ảnh động cho các phần tử, bao gồm cả những ảnh động từ display: none, cũng như tạo ảnh động cho lớp trên cùng.

Thiết lập hiệu ứng cho mục nhập bằng @starting-style

Quy tắc @starting-style xác định kiểu ban đầu của một phần tử trước khi phần tử đó hiển thị trên trang. Đây là yêu cầu bắt buộc đối với các phần tử tạo ảnh động từ display: none, vì các phần tử này cần trạng thái để tạo hiệu ứng.

Sử dụng @starting-style như mọi quy tắc at khác trong CSS bằng cách đặt kiểu của phần tử trong đó. Ví dụ: với <dialog>, hãy đặt kiểu dialog[open] trong quy tắc @starting-style. Đây là các kiểu được sử dụng trước khi hộp thoại mở.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

Bật ảnh động riêng biệt bằng allow-discrete

Điều thứ hai cần thiết để hỗ trợ ảnh động nhập cho các phần tử tạo ảnh động từ display: none, chẳng hạn như hộp thoại và cửa sổ bật lên, là bật chế độ ảnh động mới để hỗ trợ ảnh động của các thuộc tính rời. Thuộc tính rời rạc là những thuộc tính không thể nội suy giữa các giá trị. Bạn có thể xem các thiết bị này giống như một công tắc bật/tắt. Ví dụ như display, visibility, mix-blend-mode – bất kỳ thuộc tính nào có đối tượng là một giá trị. Với chế độ hoạt ảnh mới này, trình duyệt giờ đây hỗ trợ hoán đổi các giá trị ở điểm 50% thay vì tại điểm 0% của chuyển đổi.

Sử dụng một trong hai cách sau để tạo hiệu ứng ảnh động cho mục nhập cho các phần tử display: none và visibility: hidden:

• Thuộc tính độc lập transition-behavior với giá trị allow-discrete.
• Giá trị allow-discrete trong cách viết tắt hiệu ứng chuyển đổi.

Bạn nên sử dụng phương thức thứ hai, vì việc áp dụng transition-behavior có trong cú pháp viết tắt transition. Nếu bạn áp dụng transition-behavior: allow-discrete trước cách viết tắt hiệu ứng chuyển đổi khi áp dụng các hàm chuyển đổi, thời gian và tốc độ, trình duyệt sẽ bỏ qua transition-behavior.

Nếu sử dụng cách viết tắt này, bạn chỉ cần áp dụng từ khoá allow-discrete cho các thuộc tính cụ thể yêu cầu ảnh động riêng biệt. Điều này được minh hoạ trong CSS sau đây, thao tác chuyển đổi cả thuộc tính translate và thuộc tính display, nhưng chỉ áp dụng từ khoá allow-discrete cho thuộc tính display.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

Bản minh hoạ: Tổng hợp kiến thức đã học

Việc sử dụng các tính năng này đặc biệt hữu ích cho các phần tử lớp trên cùng, chẳng hạn như phần tử <dialog> hoặc các thành phần sử dụng thuộc tính popover. Trong ví dụ sau, phần tử <dialog> được tạo ảnh động từ cuối khung nhìn (ban đầu bắt đầu từ bản dịch dọc 100vh ngoài màn hình) vào giữa khung nhìn, loại bỏ bản dịch khi <dialog> đang mở.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

Bạn có thể viết mã này ngắn gọn hơn bằng cách lồng ghép CSS, đây cũng là một tính năng mới có sẵn của cơ sở.

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

Kết luận

Thật thú vị khi được chứng kiến những bước tiến như thế này trong chương trình Baseline và ít nhất thì đây cũng là một cải tiến tiến bộ tuyệt vời cho các yếu tố đó. Nếu không có các tính năng hiệu ứng nhập này, các phần tử đang tạo ảnh động vào lớp trên cùng hoặc từ kiểu display: none sẽ chỉ xuất hiện trên trang của bạn mà không cần chuyển đổi như hiện nay.

Để tìm hiểu cách thêm hiệu ứng thoát theo cách dần nâng cao, hãy xem bài viết "Bốn tính năng mới của CSS giúp nhập và thoát ảnh động suôn sẻ" và để tìm hiểu thêm về các tính năng này, hãy tham khảo các tài liệu tham khảo sau:

• @begin-style trên MDN
• hành vi chuyển đổi trên MDN