Fade

Fade làm phần tử mờ dần vào và ra — chuyển động presence nhẹ nhàng nhất.

Mọi presence component (Fade, Scale, Slide, Collapse, Blur, Rotate) dùng chung máy trạng thái usePresence (exited → entering → entered → exiting) với CSS transition; thời lượng theo token --duration*, vào dùng --curveDecelerateMid, ra dùng --curveAccelerateMid. Bỏ qua chuyển động khi người dùng bật prefers-reduced-motion. Phần tử con nhận class qua Slot nên phải là một element duy nhất.

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX

// npm install yugen-uiimport { Fade } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

faster

normal

slow

Thời lượng

duration: faster (100ms), fast, normal (mặc định, 200ms), gentle, slow (300ms).

Chưa chạy

unmountOnExit & onMotionFinish

Gỡ phần tử khỏi DOM sau khi ra xong; callback báo pha nào vừa kết thúc.

Cách dùng

Nên

Dùng Fade cho nội dung xuất hiện tại chỗ (thông báo nhỏ, placeholder, ảnh tải xong).
Giữ thời lượng ngắn (faster–normal) cho phần tử nhỏ.

Không nên

Không bọc nhiều phần tử con trực tiếp — Fade nhận đúng một element.
Không dùng Fade để báo trạng thái quan trọng mà không có chữ/icon đi kèm.

Props

Prop · Kiểu	Mặc định	Mô tả
visibleboolean	Mặc định: —	true: chạy chuyển động vào; false: chạy chuyển động ra.
appearboolean	Mặc định: false	Chạy chuyển động vào ngay lần render đầu (khi visible = true).
unmountOnExitboolean	Mặc định: false	Gỡ phần tử khỏi DOM khi thoát xong; nếu false phần tử được ẩn (visibility: hidden).
duration"faster" \| "fast" \| "normal" \| "gentle" \| "slow"	Mặc định: "normal"	Thời lượng pha vào — map tới token --durationFaster … --durationSlow; easing --curveDecelerateMid.
exitDuration"faster" \| "fast" \| "normal" \| "gentle" \| "slow"	Mặc định: = duration	Thời lượng pha ra; easing --curveAccelerateMid.
onMotionFinish(direction: "enter" \| "exit") => void	Mặc định: —	Gọi khi một pha chuyển động kết thúc.
childrenReactElement	Mặc định: —	Một phần tử duy nhất — nhận class chuyển động qua Slot.
usePresence(visible, durationMs, options)hook	Mặc định: —	Máy trạng thái dùng chung — trả về { status, mounted, active } để tự dựng chuyển động riêng.