Scale
Scale phóng phần tử từ 90% lên kích thước thật, kèm mờ dần — hợp với bề mặt nổi nhỏ.
Chuyển động transform scale + opacity; tắt mờ bằng animateOpacity={false}. Dùng appear để chạy ngay khi gắn vào trang.
Hộp thoại nhỏScale phóng từ 90% kèm mờ dần.
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 { Scale } 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.
gentle / fast
không opacity
Thời lượng vào/ra & animateOpacity
Vào chậm hơn ra (gentle / fast); hoặc chỉ scale, không đổi opacity.
桜
appear
Chạy chuyển động vào ngay lần gắn đầu tiên (đổi key để chạy lại).
Cách dùng
Nên
- Dùng cho bề mặt nhỏ bật lên: popover tuỳ biến, thẻ xem nhanh, hình minh hoạ.
- Kết hợp exitDuration ngắn hơn duration.
Không nên
- Không scale bề mặt lớn (trang, drawer) — dùng Slide.
- Không phóng chữ thân bài liên tục để gây chú ý.
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. |
| animateOpacityboolean | Mặc định: true | Kèm mờ dần. |