Tôi đã sử dụng cùng một mẫu hoạt ảnh trong các dự án của mình được một thời gian để tạo hiệu ứng cho các phần tử trên màn hình. Ở dạng đơn giản nhất, bạn sẽ có một phần tử được tạo kiểu với độ mờ bằng 0, sau đó thay đổi kiểu để có độ mờ bằng một với chuyển tiếp CSS trong một giây. Chúng tôi có thể xây dựng dựa trên điều đó bằng cách thêm các thuộc tính khác chuyển tiếp, thay đổi thời lượng, thêm độ trễ hoặc cài đặt mức giảm tùy chỉnh. là một thành phần React có thể tái sử dụng mà tôi đã tạo để sử dụng bất cứ khi nào tôi muốn nhanh chóng thêm một số hiệu ứng hoạt hình vào dự án của mình. Là một thành phần tiện ích đơn giản, nó kết hợp CSS Animation với các lớp Tailwind để tạo ra các hình ảnh động mượt mà, bắt mắt mà không tốn nhiều công sức. <AnimateIn/> Chúng ta hãy xem nó được sử dụng như thế nào. Sau khi nhập thành phần, hãy xác định các trạng thái và bằng các lớp Tailwind. Bao bọc phần tử mục tiêu trong để xem hoạt ảnh trở nên sống động. from to <AnimateIn/> import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn> Đây là một ví dụ phức tạp hơn một chút, sử dụng nhiều thuộc tính hơn để tạo hiệu ứng động trong dòng tiêu đề và phụ đề. import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header> Trong ví dụ về dòng tiêu đề, được sử dụng để tạo hiệu ứng trượt kết hợp với hiệu ứng mờ dần. Đây là cách mỗi thuộc tính đóng góp vào hoạt ảnh: <AnimateIn/> property: Bằng cách đặt , chúng ta yêu cầu AnimateIn hiển thị hoạt ảnh dưới dạng phần tử . as as="h1" <h1> thuộc tính và : Thuộc tính bắt đầu dòng tiêu đề ngoài màn hình ( , di chuyển nó xuống 32 đơn vị) và ẩn ( ). Sau đó, tính to sẽ đưa dòng tiêu đề về vị trí cuối cùng của nó (quay lại ) và làm cho nó hiển thị đầy đủ ( ). from to from translate-y-32 opacity-0 to translate-y-0 opacity-100 Thuộc : Hoạt ảnh được đặt để bắt đầu ngay lập tức mà không có độ trễ và chạy nhanh trong 300 mili giây. duration Thuộc tính : áp dụng lớp tiện ích của Tailwind để đặt kích thước phông chữ, làm cho dòng tiêu đề nổi bật. className className="text-4xl" thuộc tính : tùy chỉnh ( ) thêm sự dễ dàng độc đáo cho hoạt ảnh, tạo cho nó hiệu ứng giống như bật lên. style transitionTimingFunction cubic-bezier(0.25, 0.4, 0.55, 1.4) Phụ đề sử dụng một loạt hoạt ảnh khác để bổ sung cho dòng tiêu đề, tạo ra luồng hình ảnh gắn kết. property: Ở đây, hiển thị thành phần dưới dạng phần tử , phù hợp với phụ đề. as as="h2" <h2> thuộc tính và : Phụ đề bắt đầu được thu nhỏ xuống 0 ( ) và ẩn ( ), sau đó tăng tỷ lệ lên kích thước tự nhiên ( ) và hiển thị hoàn toàn ( ). Hiệu ứng chia tỷ lệ này, kết hợp với hiệu ứng làm mờ dần, sẽ tăng thêm chiều sâu cho hoạt ảnh. from to scale-0 opacity-0 scale-100 opacity-100 thuộc tính và : Phụ đề cũng bắt đầu sau độ trễ 800 mili giây để bắt đầu sau khi dòng tiêu đề có hoạt ảnh hoàn toàn. Cách tiếp cận so le này đảm bảo rằng mỗi yếu tố đều có được thời điểm tập trung. delay duration Thuộc tính : đặt kích thước phông chữ của phụ đề, làm cho nó nhỏ hơn dòng tiêu đề nhưng vẫn có ý nghĩa. className className="text-lg" Để hiểu rõ hơn điều gì đang xảy ra, hãy xem mã nguồn của : <AnimateIn/> trên Github sử dụng hook để khởi tạo trạng thái hoạt ảnh với thuộc tính , thuộc tính này phải là một hoặc nhiều lớp tiện ích Tailwind, thiết lập giai đoạn cho điểm bắt đầu của hoạt ảnh trước khi bất kỳ hoạt ảnh nào diễn ra. <AnimateIn/> useState from hook đầu tiên trong thành phần này nhằm tôn trọng sở thích của người dùng để giảm chuyển động. Bằng cách lắng nghe truy vấn phương tiện , hành vi hoạt ảnh dựa trên cài đặt hệ thống của người dùng. Nếu ưu tiên chuyển động giảm, hoạt ảnh sẽ bị bỏ qua hoàn toàn, trực tiếp đặt trạng thái hoạt ảnh thành tính to, cho phép trải nghiệm có thể truy cập được. useEffect (prefers-reduced-motion: reduce) to hook thứ hai là nơi chứa logic hoạt ảnh. Nếu người dùng chưa chỉ ra tùy chọn giảm chuyển động, thành phần sẽ đặt bộ hẹn giờ thay đổi trạng thái hoạt ảnh giá trị ban đầu đến giá trị cuối cùng giá trị sau độ trễ được chỉ định. Quá trình chuyển đổi này tạo ra hiệu ứng hình ảnh của hoạt ảnh. useEffect from to Chức năng dọn dẹp của hook này (câu lệnh return) sẽ xóa bộ đếm thời gian, ngăn ngừa rò rỉ bộ nhớ tiềm ẩn, chẳng hạn như nếu thành phần ngắt kết nối trước khi hoạt ảnh hoàn tất. Lệnh gọi hàm là cơ chế kết xuất của thành phần. Nó tự động tạo một phần tử HTML dựa trên prop, cho phép sử dụng thành phần này trên các phần tử HTML khác nhau. được xây dựng bằng cách sử dụng hàm , kết hợp các lớp tiện ích của Tailwind, tùy chỉnh được truyền dưới dạng chỗ dựa và trạng thái hoạt ảnh hiện tại. Việc gán lớp động này là thứ áp dụng các kiểu và chuyển tiếp mong muốn cho phần tử. React.createElement as className cn phổ biến bởi shadcn className Ngoài ra, có một thuộc tính có thể được chuyển vào để đặt trực tiếp các thuộc tính kiểu dáng trên vùng chứa hoạt ảnh. được đặt dựa trên thuộc , nhưng nó sẽ chuyển sang một cách thông minh nếu người dùng muốn giảm chuyển động, vô hiệu hóa hoạt ảnh một cách hiệu quả trong khi vẫn duy trì chức năng của thành phần. style transitionDuration duration 0ms Nếu bạn muốn sử dụng trong dự án của riêng mình và nó đã sử dụng thì bạn đã có mọi thứ mình cần, chỉ cần và thêm nó vào các thành phần của bạn. <AnimateIn/> shadcn tải xuống AnimateIn.tsx Nếu không, bạn sẽ muốn cũng như để hợp nhất các lớp tailwind. cài đặt Tailwind mxcn tiện ích hữu ích Giống như shadcn, <AnimateIn/> được coi là một thành phần có thể tái sử dụng mà bạn có thể sao chép và dán vào ứng dụng của mình cũng như tùy chỉnh theo nhu cầu của mình. Mã này là của bạn. Ngoài ra, tôi đã tập hợp một trang demo thú vị để thử tạo các hoạt ảnh khác nhau với tại . <AnimateIn/> animate-in.vercel.app Cũng được xuất bản ở đây

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Making security fun one episode at a time

Tôi đã tạo một thành phần tiện ích React cho hoạt ảnh bằng Tailwind và CSS: AnimateIn

dài quá đọc không nổi

John Polacek

About Author

chuyên mục

Languages

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI...

Tôi đã tạo một thành phần tiện ích React cho hoạt ảnh bằng Tailwind và CSS: AnimateIn

dài quá đọc không nổi

John Polacek

About Author

chuyên mục

Languages

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI...

NHỮNG BÀI VIẾT LIÊN QUAN