emil-design-eng

| Before | After | Why | | --- | --- | --- | | `transition: all 300ms ease-in` | `transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out)` | 只動畫 `opacity` 與 `transform`；較短的自訂 ease-out 能提供即時回饋。 | | 關閉時 `transform: scale(0)` | `opacity: 0; transform: scale(0.95)` | 避免選單像從虛無中消失，保留自然的視覺形體。 | | `transform-origin: center` | `transform-origin: var(--transform-origin)` | 下拉選單應從觸發按鈕的位置展開，而非固定從中心縮放。 | | 按鈕沒有 `:active` 狀態 | `transform: scale(0.97)` | 提供清楚、即時且細微的按壓回饋。 | ```css :root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); } .dropdown { opacity: 1; transform: scale(1); transform-origin: var(--transform-origin); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); } .dropdown[data-state="closed"] { opacity: 0; transform: scale(0.95); pointer-events: none; } .dropdown-trigger { transition: transform 120ms var(--ease-out); } .dropdown-trigger:active { transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { .dropdown, .dropdown-trigger { transition-property: opacity; } .dropdown[data-state="closed"], .dropdown-trigger:active { transform: none; } } ```

## Toast 狀態與動畫策略 | 情境 | 策略 | | --- | --- | | 新 toast 到達 | 立即加入可見堆疊，只替新項目播放進場；既有項目不重播 | | 相同 ID 更新 | 原地更新內容，不重新進場；必要時僅淡化內容 `100–150ms` | | 堆疊重新排序 | 使用 FLIP／layout transition，從目前視覺位置平滑移到新位置 | | 動畫途中再次更新 | 取消舊目標並從當前位置重新計算；不得等待前一段動畫結束 | | 手動關閉／逾時 | 進入 `exiting`，視覺退場後移除；業務操作立即生效 | | 超過顯示上限 | 建議最多顯示 3–5 則；最舊項目直接退場，不建立動畫佇列 | 狀態可採： ```text entering → visible → exiting → removed ↑ content update ``` ### 動畫規格 - 進場：`opacity: 0 → 1`，並從靠近螢幕邊緣的方向位移 `12–16px → 0`。 - Duration：`180–220ms`。 - Easing：`cubic-bezier(0.23, 1, 0.32, 1)`，快速起步、柔和停止。 - 不使用 `600ms` 彈跳、`scale(0)` 或明顯 overshoot；高頻通知會讓這些效果顯得拖沓。 - 退場：沿進場方向返回，`opacity: 1 → 0`，位移約 `8–12px`。 - Duration：`120–160ms`。 - Easing：同一組強 ease-out。 - 退場應比進場快，讓使用者感受到系統已立即回應。 - 重新排序：只動畫 `transform`，不要動畫 `top`、`height` 或 `margin`。 - Duration：`160–200ms`。 - Easing：`cubic-bezier(0.77, 0, 0.175, 1)`。 - 新通知到達時，既有 toast 僅移動到新位置，不改變 opacity、不縮放。 - 若重排尚未完成又有新項目，從當前畫面位置重新定向，不串接或排隊。 實作上優先使用可中斷的 CSS transition；若使用 WAAPI，更新前先 `cancel()`，保留當前 computed transform 後再設定新目標。避免動態 toast 使用會從頭重播的 keyframes。 ```css .toast { transition: transform 180ms cubic-bezier(0.77, 0, 0.175, 1), opacity 140ms cubic-bezier(0.23, 1, 0.32, 1); will-change: transform, opacity; } ``` ### Reduced motion ```css @media (prefers-reduced-motion: reduce) { .toast { transform: none !important; transition: opacity 120ms ease-out; } } ``` 保留短暫淡入淡出以說明狀態變化，但取消位移、縮放、彈跳與堆疊滑動；重新排序直接完成。 ### 避免動畫阻礙操作 - Toast 一加入 DOM 就可點擊，不等待進場完成。 - 關閉、復原或其他 action 在點擊當下執行；退場只是結果呈現。 - 動畫僅使用 `transform` 與 `opacity`，避免 layout/paint 抖動。 - 動畫層不得覆蓋其他控制項；容器空白區使用 `pointer-events: none`，toast 本身恢復 `pointer-events: auto`。 - Hover、鍵盤 focus、拖曳與頁籤隱藏時暫停自動關閉計時，避免使用者操作途中消失。 - 動畫期間維持可見焦點；被 focus 的 toast 不因堆疊上限自動移除。 - 快速連續操作時直接更新最終狀態，不因動畫建立工作佇列。 - 若通知流量持續升高，可將重複項目聚合成「新增 4 則通知」，降低視覺干擾。

| Before | After | Why | | --- | --- | --- | | **滑鼠：**卡片操作只在未限制的 `:hover` 顯示；所有圖示一起旋轉 360°；modal 從按鈕位置縮放 | 僅在 `@media (hover: hover) and (pointer: fine)` 中顯示 hover 操作；只讓目前操作的圖示以顏色或 `scale(0.97)` 提供 100–160ms 回饋；modal 從畫面中央以 `opacity: 0; scale(0.95)`、200–250ms ease-out 進場 | Hover 應只套用於精準指標；大量旋轉分散注意力；modal 不屬於觸發器的空間延伸，應維持中央原點 | | **鍵盤：**Tab 無法顯示卡片操作；啟用一項操作仍觸發全部圖示旋轉；modal 動畫從觸發按鈕展開 | 以 `:focus-within` 顯示操作並提供清楚的 `:focus-visible`；支援 Enter／Space；鍵盤觸發時取消圖示與 modal 位移／縮放動畫；開啟後聚焦 modal、關閉後還原至觸發按鈕 | 鍵盤使用者必須能發現、操作並追蹤焦點；高頻鍵盤操作應立即回應，不應被動畫拖慢 | | **觸控：**沒有 hover，因此操作不可見且點按缺乏回饋；點擊造成所有圖示旋轉 | 將主要操作常駐，或提供始終可見且有標籤的更多操作按鈕；加入 `:active { transform: scale(0.97) }`；只更新被點擊項目的狀態；modal 維持中央淡入／輕微縮放 | 觸控介面不能依賴 hover；按壓回饋應即時且局部，避免誤以為多個操作同時執行 | | **Reduced motion：**仍旋轉圖示 360°，modal 仍沿觸發位置移動並縮放 | 在 `prefers-reduced-motion: reduce` 下移除 `rotate`、位移與縮放；以 150–200ms 的 opacity／color transition 顯示狀態與 modal | 保留必要的狀態辨識，同時避免可能造成不適的旋轉與空間移動 |