Tạo ảnh động cho khung hiển thị mô-đun

Khung hiển thị phương thức chặn giao diện người dùng để hiển thị các thông báo quan trọng. Tìm hiểu cách tạo ảnh động cho khung hiển thị phương thức trong ứng dụng của bạn.

Tạo ảnh động cho khung hiển thị phụ.
Dùng thử

Khung hiển thị phương thức dành cho các thông báo quan trọng và bạn có lý do rất chính đáng để chặn giao diện người dùng. Hãy thận trọng khi sử dụng vì chúng gây phiền toái và có thể dễ dàng huỷ hoại trải nghiệm người dùng nếu bị lạm dụng. Tuy nhiên, trong một số trường hợp, đây là chế độ xem phù hợp để sử dụng và việc thêm một số ảnh động sẽ giúp các ảnh này trở nên sống động.

  • Sử dụng chế độ xem phụ một cách thận trọng; người dùng sẽ cảm thấy khó chịu nếu bạn làm gián đoạn trải nghiệm của họ một cách không cần thiết.
  • Việc tăng tỷ lệ cho ảnh động sẽ tạo ra hiệu ứng "thả vào" đẹp mắt.
  • Nhanh chóng loại bỏ chế độ xem khi người dùng đóng. Tuy nhiên, hãy đưa chế độ xem phương thức lên màn hình chậm hơn một chút để người dùng không bị bất ngờ.

Lớp phủ phương thức phải được căn chỉnh cho phù hợp với khung nhìn, vì vậy, hãy đặt position của lớp phủ phương thức thành fixed:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

Lớp này có opacity ban đầu là 0 nên bị ẩn khỏi khung hiển thị, nhưng sau đó cũng cần đặt pointer-events thành none để các lượt nhấp và thao tác chạm có thể đi qua. Nếu không, Chrome sẽ chặn tất cả các lượt tương tác và khiến toàn bộ trang không phản hồi. Cuối cùng, vì hàm này tạo ảnh động cho opacitytransform, nên các tệp đó cần được đánh dấu là thay đổi bằng will-change (xem thêm Sử dụng thuộc tính sẽ thay đổi).

Khi hiển thị, khung hiển thị đó cần chấp nhận các lượt tương tác và có opacity là 1:

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

Bây giờ, bất cứ khi nào cần chế độ xem phương thức, bạn có thể sử dụng JavaScript để chuyển đổi lớp "visible":

modal.classList.add('visible');

Tại thời điểm này, chế độ xem phương thức xuất hiện mà không có bất kỳ ảnh động nào, vì vậy bạn hiện có thể thêm chế độ đó vào (xem thêm phần Tăng tốc tuỳ chỉnh):

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

Việc thêm scale vào hiệu ứng biến đổi sẽ làm cho khung hiển thị có vẻ hơi thả xuống màn hình. Đây là một hiệu ứng thú vị. Chuyển đổi mặc định áp dụng cho cả thuộc tính biến đổi và độ mờ với đường cong tuỳ chỉnh và thời lượng 0,1 giây.

Thời lượng này khá ngắn, nhưng rất lý tưởng khi người dùng đóng khung hiển thị và muốn quay lại ứng dụng của bạn. Nhược điểm là thời lượng quá linh hoạt khi người dùng đóng khung hiển thị phụ. Để khắc phục vấn đề này, hãy ghi đè các giá trị chuyển đổi cho lớp visible:

.modal.visible {
  transform: scale(1);

  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

Giờ đây, chế độ xem phương thức mất 0,3 giây để xuất hiện trên màn hình, ít linh hoạt hơn một chút, nhưng sẽ bị loại bỏ nhanh chóng, điều này được người dùng đánh giá cao.