Thay thế, thêm hay tích luỹ? Câu hỏi sẽ được giải đáp.
Kết hợp nhiều hiệu ứng ảnh động
Thuộc tính animation-composition cho phép kiểm soát điều sẽ xảy ra khi nhiều ảnh động ảnh hưởng đến cùng một thuộc tính cùng một lúc.
Giả sử bạn đã áp dụng phép biến đổi cơ sở này cho một phần tử:
transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);
Và bạn cũng có tập hợp các khung hình chính sau đây:
@keyframes adjust {
to {
transform: translateX(100px);
}
}
Khi áp dụng các khung hình chính này cho một phần tử, transform trong khung hình chính to sẽ thay thế transform hiện có. Đây là hành vi mặc định.
Với animation-composition, giờ đây bạn có quyền kiểm soát những gì sẽ xảy ra thay vì replace mặc định. Các giá trị được chấp nhận là:
replace: Giá trị hiệu ứng thay thế giá trị cơ bản. (mặc định)add: Giá trị hiệu ứng được thêm vào giá trị cơ bản.accumulate: Giá trị hiệu ứng được kết hợp với giá trị cơ bản.
Sự khác biệt giữa phép cộng và tích luỹ rất khó phát hiện. Ví dụ: lấy hai giá trị blur(2) và blur(3). Khi được cộng lại với nhau, điều này sẽ tạo ra blur(2) blur(3), nhưng khi tích luỹ, điều này sẽ tạo ra blur(5).
Bạn có thể so sánh sản phẩm này với một cốc đầy trà. Khi đổ sữa vào, điều này sẽ xảy ra:
replace: Trà sẽ bị loại bỏ và được thay thế bằng sữa.add: Sữa được thêm vào cốc, nhưng vẫn được phủ lên trên trà.accumulate: Sữa được thêm vào trà và vì cả hai đều là chất lỏng nên chúng kết hợp hài hoà với nhau.
Bản minh hoạ
Trong bản minh hoạ bên dưới, có 3 hộp màu xám áp dụng cơ sở transform và animation đó.
Mặc dù các hộp này có cùng ảnh động, nhưng chúng lại mang lại kết quả khác vì chúng có tập hợp animation-composition khác:
Hộp đầu tiên được đặt thành animation-composition: replace. Đây là hành vi mặc định. Ở vị trí cuối, giá trị translateX(50px) rotate(45deg) ban đầu cho transform chỉ được thay thế bằng translateX(100px).
Hộp thứ hai được đặt thành animation-composition: add. Ở vị trí cuối cùng, translateX(100px) được thêm vào translateX(50px) rotate(45deg) ban đầu, tạo ra translateX(50px) rotate(45deg) translateX(100px). Điều này di chuyển hộp 50px, sau đó xoay 45 độ và sau đó di chuyển 100px.
Hộp thứ ba được đặt thành animation-composition: accumulate. Ở vị trí cuối cùng, translateX(100px) sẽ được thêm vào translateX(50px) từ phép biến đổi ban đầu về mặt toán học, dẫn đến phép biến đổi translateX(150px) rotate(45deg).