Hover.css v2.3.0 giới thiệu một cải tiến quan trọng: hệ thống hoạt ảnh biểu tượng (icon animation) được thiết kế lại hoàn toàn. Thay vì phụ thuộc vào cấu trúc HTML cứng nhắc, phiên bản mới cho phép developers kiểm soát linh hoạt hành vi của các phần tử đồ họa khi người dùng di chuột qua. Dưới đây là phân tích chi tiết về kiến trúc mới, cách tích hợp và các mẹo tối ưu hiệu suất cho dự án web.

1. Kiến trúc tách biệt giữa icon và nội dung

Trong các bản phát hành trước, hiệu ứng thường bị ràng buộc bởi markup cố định. Phiên bản 2.3.0 giải quyết vấn đề này bằng cách sử dụng lớp `.hvr-icon` làm trình chọn độc lập. Điều này cho phép đặt biểu tượng ở bất kỳ vị trí nào trong DOM mà vẫn kích hoạt đúng hoạt ảnh.

<a href="#" class="ui-btn-rotate">
  <img src="refresh.svg" class="hvr-icon" />
  <span>Làm mới dữ liệu</span>
</a>

Logic CSS được tổ chức lại để chỉ ảnh hưởng đến phần tử con khi có sự kiện `:hover`. Ví dụ về cấu trúc Less được điều chỉnh để tối giản dòng code:

.ui-btn-rotate {
  .icon-element {
    .transition(transform);
    .transform(rotate(360deg));
  }
}

2. Hỗ trợ linh hoạt định dạng tài nguyên

Hệ thống không còn giới hạn ở các font icon như FontAwesome. Developers có thể nhúng trực tiếp file SVG, PNG hoặc WebP mà vẫn duy trì được độ mượt mà của hoạt ảnh. Kết hợp với mixin tùy chỉnh trong SCSS, việc tạo hiệu ứng co giãn (scale) trở nên đơn giản:

@mixin animate-bounce {
  .ui-icon-target {
    transform: scale(1.25);
    transition-timing-function: cubic-bezier(0.4, 2.2, 0.3, -0.25);
  }
}

3. Bộ sưu tập 18 hoạt ảnh tiêu chuẩn

Trong thư mục `less/effects/icons` và `scss/effects/icons`, tác giả cung cấp sẵn 18 mẫu được phân nhóm rõ ràng để phù hợp với từng ngữ cảnh UI:

4. Quy trình tích hợp vào dự án

Nhập nhanh qua CDN:

<link href="css/hover-min.css" rel="stylesheet">

Lấy nguồn gốc để tùy biến:

git clone https://gitcode.com/gh_mirrors/ho/Hover

Để tránh xung đột class name, developers có thể ghi đè biến tiền tố trong file `scss/_options.scss`:

$custom-prefix: 'ui-anim-';
$auto-generate: false;

Kết hợp với bộ công cụ build như Grunt hoặc Webpack, quy trình biên dịch chỉ những hiệu ứng cần thiết giúp giảm đáng kể dung lượng file CSS cuối cùng.

5. Tương thích trình duyệt & Tối ưu hiệu năng

Bảng hỗ trợ các tính năng chính trên các trình duyệt phổ biến:

Các khuyến nghị để đạt FPS ổn định khi render hoạt ảnh:

• Không chồng chéo quá nhiều lớp transition trên cùng một phần tử.
• Sử dụng thuộc tính `will-change: transform` để trình duyệt phân bổ bộ nhớ GPU trước.
• Thêm hack kích hoạt hardware acceleration trong các trường hợp render bị giật: `@include prefixed(transform, translateZ(0));`

6. Hướng phát triển trong tương lai

Dựa trên roadmap chính thức, nhóm phát triển đang hướng tới việc xây dựng công cụ cấu hình trực quan (GUI editor). Cộng đồng open-source có thể tham gia đóng góp thông qua tài liệu hướng dẫn quy trình PR. Các tính năng ưu tiên hàng đầu bao gồm:

• Tùy chỉnh đường cong tốc độ (timing function) bằng giao diện kéo thả.
• Hỗ trợ đồng bộ hoạt ảnh giữa nhiều biểu tượng.
• Trình xem trước realtime dựa trên CSS Variables.