mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-07-27 16:26:16 +08:00
feat(toolbar): add smooth transition animation for AppSwitcher compact toggle
Replace conditional rendering with always-rendered span driven by CSS max-width + opacity animation. Add time-lock in useAutoCompact to prevent ResizeObserver flicker during expand animation.
This commit is contained in:
@@ -14,12 +14,16 @@ export function useAutoCompact(
|
||||
): boolean {
|
||||
const [compact, setCompact] = useState(false);
|
||||
const normalWidthRef = useRef(0);
|
||||
const lockUntilRef = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
const el = containerRef.current;
|
||||
if (!el) return;
|
||||
|
||||
const ro = new ResizeObserver(() => {
|
||||
// During expand animation, ignore resize events to prevent flicker
|
||||
if (Date.now() < lockUntilRef.current) return;
|
||||
|
||||
if (!compact) {
|
||||
// Cache the total content width in normal mode
|
||||
normalWidthRef.current = el.scrollWidth;
|
||||
@@ -31,6 +35,8 @@ export function useAutoCompact(
|
||||
// In compact mode: only recover to normal if
|
||||
// available space >= what normal mode needed
|
||||
if (el.clientWidth >= normalWidthRef.current) {
|
||||
// Lock out resize events during the expand animation (200ms + 50ms margin)
|
||||
lockUntilRef.current = Date.now() + 250;
|
||||
setCompact(false);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user