Back to Details

transitions-dev

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Transitions.dev

Transitions.dev

Twelve portable CSS transitions, each namespaced under 
t-*
selectors with semantic CSS custom properties. Drop-in: paste the snippet, wire the documented HTML hooks, done. No framework dependencies, no demo-specific markup, and every snippet ships a 
prefers-reduced-motion
guard.
十二种可移植的CSS过渡效果，每种都以
t-*
选择器命名，并搭配语义化CSS自定义属性。即插即用：粘贴代码片段，对接文档中说明的HTML钩子，即可完成集成。无框架依赖，无演示专用标记，每个代码片段都包含
prefers-reduced-motion
防护机制。

Quick reference

快速参考

TransitionWhen to useReference
Card resizeTween a container's width or height when its layout state changes.01-card-resize.md
Number pop-inRe-enter each digit with a blurred slide when a number updates.02-number-pop-in.md
Notification badgeSlide a small badge onto a trigger and pop the dot.03-notification-badge.md
Text states swapSwap text in place with a blurred up-and-down transition.04-text-states-swap.md
Menu dropdownOpen an origin-aware dropdown that grows from its trigger.05-menu-dropdown.md
Modal open / closeScale-up modal dialog with a softer scale-down on close.06-modal.md
Panel revealSlide a panel into a region with a cross-blur.07-panel-reveal.md
Page side-by-sideSlide between two side-by-side pages (list ↔ detail, step 1 ↔ step 2).08-page-side-by-side.md
Icon swapCross-fade two icons in the same slot with blur and scale.09-icon-swap.md
Success checkCompose fade + rotate + Y-bob + path stroke-draw to celebrate a completed action.10-success-check.md
Avatar group hoverDistance-falloff lift on a row of items with a bouncy spring on return.11-avatar-group-hover.md
Error state shakePer-segment cubic-bezier shake with auto-reverting border + message.12-error-state-shake.md
过渡效果适用场景参考链接
卡片尺寸调整当容器布局状态变化时，缓动调整其宽度或高度。01-card-resize.md
数字弹出数字更新时，每个数字以模糊滑动效果重新显示。02-number-pop-in.md
通知徽章将小型徽章滑动到触发元素上，并使圆点弹出。03-notification-badge.md
文本状态切换通过模糊上下过渡效果，原地切换文本内容。04-text-states-swap.md
菜单下拉打开一个从触发元素展开的、感知原点的下拉菜单。05-menu-dropdown.md
模态框打开/关闭模态框打开时缩放显示，关闭时以更柔和的缩放效果收起。06-modal.md
面板展开带有交叉模糊效果的面板滑入页面区域。07-panel-reveal.md
页面并排切换在两个并排页面间滑动切换（列表↔详情、步骤1↔步骤2）。08-page-side-by-side.md
图标切换在同一位置以模糊和缩放效果交叉淡入淡出两个图标。09-icon-swap.md
成功校验组合淡入、旋转、Y轴摆动和路径描边绘制效果，庆祝操作完成。10-success-check.md
头像组悬停水平排列的元素在悬停时随距离衰减抬起，离开时以弹性弹簧效果复位。11-avatar-group-hover.md
错误状态抖动分段式三次贝塞尔曲线抖动效果，自动还原边框和提示信息。12-error-state-shake.md

Decision rules

决策规则

When the user asks for a transition, match against the visible UI element first, then the verb:
  • Trigger + small dot floating on top → notification badge.
  • Trigger + surface that grows from it → dropdown (anchored, origin-aware) or modal (centered, no anchor).
  • Surface that slides into a region of the page → panel reveal.
  • Two screens, list ↔ detail or step 1 ↔ step 2 → page side-by-side.
  • Element changes width or height → card resize.
  • Element's text content changes in place → text states swap.
  • Two icons in the same slot → icon swap.
  • A number updates → number pop-in.
  • Confirmation / success / "done" moment (checkmark, payment processed, file uploaded) → success check.
  • Hovering an item in a horizontal stack (avatars, chips, segmented buttons, tag pills) → avatar group hover.
  • Form validation error / "this is wrong" feedback (invalid field, wrong PIN, duplicate name) → error state shake.
  • No clear match → fall back to 
    transitions reveal
    and let the user pick. Don't guess.
If two transitions could fit, prefer the lower-overhead one (card resize over panel reveal, dropdown over modal, success check over a full modal celebration) unless the design clearly calls for the heavier surface. The success check is animation-only — if you also need to swap from a spinner to the check, pair it with icon swap.
当用户请求过渡效果时，优先匹配可见UI元素，再匹配动词：
  • 触发元素 + 顶部悬浮的小圆点 → 通知徽章。
  • 触发元素 + 从其展开的表层 → 下拉菜单（锚定、感知原点）或模态框（居中、无锚点）。
  • 滑入页面区域的表层 → 面板展开。
  • 两个屏幕，列表↔详情或步骤1↔步骤2 → 页面并排切换。
  • 元素宽度或高度变化 → 卡片尺寸调整。
  • 元素文本内容原地变化 → 文本状态切换。
  • 同一位置的两个图标 → 图标切换。
  • 数字更新 → 数字弹出。
  • 确认/成功/“完成”场景（对勾、支付完成、文件上传） → 成功校验。
  • 水平堆叠元素悬停（头像、标签、分段按钮、标签胶囊） → 头像组悬停。
  • 表单验证错误/“内容有误”反馈（无效字段、错误PIN码、重复名称） → 错误状态抖动。
  • 无明确匹配项 → 回退到
    transitions reveal
    ，让用户选择。请勿猜测。
如果两个过渡效果都适用，优先选择开销更低的那个（卡片尺寸调整优于面板展开，下拉菜单优于模态框，成功校验优于完整模态框庆祝效果），除非设计明确要求更复杂的表层。成功校验仅为动画效果——如果还需要从加载 spinner 切换到对勾，请搭配图标切换效果。

Commands

命令

The skill exposes three namespaced verbs the agent should recognise in addition to direct transition requests. Every command starts with 
transitions
so the invocation never collides with verbs from other skills installed in the same project.
该工具除了直接的过渡效果请求外，还提供三个命名空间动词，Agent需能够识别。每个命令均以
transitions
开头，因此不会与同一项目中安装的其他工具的动词冲突。

transitions reveal — list every transition

transitions reveal — 列出所有过渡效果

Trigger phrases: 
transitions reveal
, "reveal the transitions", "list all transitions", "what transitions are in this skill", "show the transitions catalog".
Behaviour: print the twelve transitions as a numbered plain-text list — name, one-line summary, and the matching reference filename. Reuse the rows in 
## Quick reference
above; do not invent new copy. No project access.
触发短语： 
transitions reveal
、“展示过渡效果”、“列出所有过渡效果”、“这个工具里有哪些过渡效果”、“显示过渡效果目录”。
行为： 以编号纯文本列表形式打印十二种过渡效果——名称、一行摘要和对应的参考文件名。复用上方
## 快速参考
中的内容；请勿自行编写新内容。无需访问项目文件。

transitions review — audit the project for fit

transitions review — 审核项目适配性

Trigger phrases: 
transitions review
, "review my project", "audit my animations", "where would transitions.dev help", "find places to use this skill".
Behaviour:
  1. Search the workspace for indicators: 
    transition:
    declarations, 
    @keyframes
    , hardcoded 
    ms
    / 
    s
    durations in style files, components matching the eleven decision-rule patterns (modals, dropdowns, badges, …).
  2. For each hit, match against the decision rules and pick the single best-fit transition.
  3. Output a numbered list grouped by file: 
    • path/to/Component.tsx:L42
      — looks like a dropdown opening, suggest menu-dropdown (
      05-menu-dropdown.md
      ).
    • Skip ad-hoc transitions that already use a 
      t-*
      class.
  4. Do not edit anything. End with: "Run 
    transitions apply
    on any line to install the suggested transition."
触发短语： 
transitions review
、“审核我的项目”、“检查我的动画”、“transitions.dev能在哪些地方提供帮助”、“寻找可使用该工具的位置”。
行为：
  1. 在工作区中搜索标识：
    transition:
    声明、
    @keyframes
    、样式文件中硬编码的
    ms
    /
    s
    时长、符合十一种决策规则模式的组件（模态框、下拉菜单、徽章等）。
  2. 针对每个匹配项，对照决策规则选择最合适的单一过渡效果。
  3. 按文件分组输出编号列表： 
    • path/to/Component.tsx:L42
      — 看起来是下拉菜单展开效果，建议使用菜单下拉（
      05-menu-dropdown.md
      ）。
    • 跳过已使用
      t-*
      类的临时过渡效果。
  4. 请勿编辑任何内容。结尾附上：“在任意行运行
    transitions apply
    即可安装建议的过渡效果。”

transitions apply — install the best-fit transition

transitions apply — 安装最合适的过渡效果

Trigger phrases: 
transitions apply
, "apply a transition here", "add the right transition", "install transitions-dev here", "fix the animation on this element".
Behaviour:
  1. Read context: the currently-open file, the element nearest the cursor, surrounding CSS / JSX. If the user named a transition explicitly (e.g. 
    transitions apply menu-dropdown
    ), use it.
  2. Run the decision rules from 
    ## Decision rules
    on that context and pick one transition. If two could fit, prefer the lower-overhead one (same tie-breaker the existing rules use).
  3. Surface a one-line proposal: "I'd apply menu-dropdown here because the element opens from a trigger and is anchored. Confirm to install?".
  4. On confirmation, follow the existing five-step procedure in 
    ## Output format
    verbatim (root block, snippet, hooks, reduced-motion guard, JS orchestration if needed).
  5. If the agent can't pick a single transition with confidence, fall back to 
    transitions reveal
    and ask the user to choose.
触发短语： 
transitions apply
、“在此处应用过渡效果”、“添加合适的过渡效果”、“在此处安装transitions-dev”、“修复该元素的动画效果”。
行为：
  1. 读取上下文：当前打开的文件、光标附近的元素、周围的CSS/JSX。如果用户明确指定了过渡效果（例如
    transitions apply menu-dropdown
    ），则使用该效果。
  2. 针对该上下文执行
    ## 决策规则
    ，选择一种过渡效果。如果两个效果都适用，优先选择开销更低的那个（与现有规则中的平局处理方式一致）。
  3. 展示一行提议：“我建议在此处应用菜单下拉效果，因为该元素从触发元素展开且已锚定。确认安装吗？”。
  4. 确认后，严格按照
    ## 输出格式
    中的五步流程执行（根块、代码片段、钩子、减动画防护机制、必要时的JS编排）。
  5. 如果Agent无法自信地选择单一过渡效果，回退到
    transitions reveal
    并请用户选择。

Universal install

通用安装

Drop this 
:root
block into your project once. Every transition snippet reads from these semantic names — there are no per-component values to chase down later.
css
/* transitions-dev — copy this :root block into your project once.
   Every transition snippet reads from these semantic names. */
:root {
  /* Card resize */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* Notification badge */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Text states swap */
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  /* Menu dropdown */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Modal open / close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Panel reveal */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Page side-by-side */
  --page-slide-dur: 200ms;
  --page-fade-dur: 200ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Icon swap */
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* Success check */
  --check-opacity-dur: 550ms;
  --check-rotate-dur: 550ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 450ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 550ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Avatar group hover */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* Error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
}
The 
--pX-*
source tokens used by the live demo at transitions.dev are intentionally not exported here. Tunable values are renamed to semantic names (
--badge-*
, 
--dropdown-*
, 
--modal-*
, …) so the user owns the design vocabulary.
将以下
:root
块一次性添加到你的项目中。每个过渡效果代码片段都会读取这些语义化名称——无需后续追踪每个组件的单独值。
css
/* transitions-dev — copy this :root block into your project once.
   Every transition snippet reads from these semantic names. */
:root {
  /* Card resize */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* Notification badge */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Text states swap */
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  /* Menu dropdown */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Modal open / close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Panel reveal */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Page side-by-side */
  --page-slide-dur: 200ms;
  --page-fade-dur: 200ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Icon swap */
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* Success check */
  --check-opacity-dur: 550ms;
  --check-rotate-dur: 550ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 450ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 550ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Avatar group hover */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* Error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
}
transitions.dev在线演示中使用的
--pX-*
源令牌未在此处导出。可调值已重命名为语义化名称（
--badge-*
、
--dropdown-*
、
--modal-*
等），以便用户掌控设计词汇。

Output format

输出格式

When inserting a transition into the user's project:
  1. Add the 
    :root
    block above     to the user's global stylesheet, but only if it isn't already there. If the user already imported the universal install block once, do not duplicate it.
  2. Paste the chosen transition's CSS verbatim from the relevant reference file. Do not rewrite selectors, do not collapse the transition into shorthand, do not strip 
    will-change
    . The snippets are tuned and tested.
  3. Wire the documented HTML hooks — class names (
    .t-dropdown
    , 
    .t-modal
    , 
    .t-success-check
    , 
    .t-avatar
    , 
    .t-input
    , …) and state attributes (
    data-open
    , 
    data-state
    , 
    data-page
    , 
    .is-open
    , 
    .is-closing
    , 
    .is-exit
    , 
    .is-enter-start
    , 
    .is-animating
    , 
    .is-error
    , 
    .is-shaking
    ).
  4. Preserve the 
    @media (prefers-reduced-motion: reduce)
    block.     Every snippet ships one. Removing it makes the component fail accessibility audits.
  5. For transitions that need JS (dropdown, modal, text swap, number pop-in, page slide, success check, avatar group hover, error state shake), copy the small orchestration snippet from the reference file and adapt the selectors to the user's DOM. Keep the timing reads (
    getComputedStyle(...)getPropertyValue("--…")
    ) so durations stay in sync with the 
    :root
    values.
Keep the diff small: only edit the files needed to introduce the transition. Don't rename the user's existing variables, don't reformat unrelated CSS, don't pull in a motion library.
将过渡效果插入用户项目时：
  1. 将上述
    :root
    块添加到用户的全局样式表中    ，但仅当尚未添加时才执行。如果用户已导入过一次通用安装块，请不要重复添加。
  2. 从相关参考文件中逐字粘贴所选过渡效果的CSS代码。请勿重写选择器，请勿将过渡效果简化为简写形式，请勿删除
    will-change
    属性。这些代码片段均经过调优和测试。
  3. 对接文档中说明的HTML钩子——类名（
    .t-dropdown
    、
    .t-modal
    、
    .t-success-check
    、
    .t-avatar
    、
    .t-input
    等）和状态属性（
    data-open
    、
    data-state
    、
    data-page
    、
    .is-open
    、
    .is-closing
    、
    .is-exit
    、
    .is-enter-start
    、
    .is-animating
    、
    .is-error
    、
    .is-shaking
    ）。
  4. 保留
    @media (prefers-reduced-motion: reduce)
    块    。每个代码片段都包含该块。删除它会导致组件无法通过可访问性审核。
  5. 对于需要JS的过渡效果（下拉菜单、模态框、文本切换、数字弹出、页面滑动、成功校验、头像组悬停、错误状态抖动），从参考文件中复制小型编排代码片段，并根据用户的DOM调整选择器。保留时长读取代码（
    getComputedStyle(...)getPropertyValue("--…")
    ），以便时长与
    :root
    值保持同步。
尽量减少差异：仅编辑引入过渡效果所需的文件。请勿重命名用户现有变量，请勿格式化无关CSS，请勿引入动画库。

Common mistakes to avoid

需避免的常见错误

  • Stripping the close-state class cleanup on dropdown/modal — without the 
    setTimeout
    that removes 
    .is-closing
    , the next open jumps from the closing scale instead of the resting pre-open scale.
  • Forgetting the reflow in the text swap, number pop-in, success check replay, and error state shake — 
    void el.offsetWidth
    (or 
    offsetHeight
    ) between class/attribute removal and re-addition is what guarantees the animation replays.
  • Animating a single container instead of the inner pieces — for the badge, animate the dot, not the trigger; for page slide, animate the page sections, not the container.
  • Replacing 
    transition: …
    with 
    transition: all
     — every snippet enumerates exact properties on purpose so unrelated style changes don't ride in for free.
  • Hardcoding the success check's 
    stroke-dasharray
     — the snippet ships 
    20
    as a placeholder. Replace it with 
    path.getTotalLength()
    rounded up by 1 for your path, otherwise the stroke pre-reveals or over-draws.
  • Setting 
    transition-timing-function
    in CSS     for the avatar group hover — it has to be set inline in JS before the 
    --shift
    / 
    --scale-active
    writes so the bouncy ease-out only applies on 
    mouseleave
    .
  • Mixing 
    .is-error
    and 
    .is-shaking
    into one class     for the error state shake — keeping them orthogonal is what allows the shake to replay (remove → reflow → re-add) without flickering the whole error treatment.
  • 删除下拉菜单/模态框的关闭状态类清理代码——如果没有移除
    .is-closing
    的
    setTimeout
    ，下次打开时会从关闭时的缩放比例开始，而非静止的预打开比例。
  • 在文本切换、数字弹出、成功校验重放和错误状态抖动中忘记回流——在移除和重新添加类/属性之间执行
    void el.offsetWidth
    （或
    offsetHeight
    ）是确保动画重放的必要操作。
  • 仅为单个容器添加动画而非内部元素——对于徽章，应为圆点添加动画，而非触发元素；对于页面滑动，应为页面区块添加动画，而非容器。
  • 将
    transition: …
    替换为
    transition: all
    ——每个代码片段都明确列举了属性，目的是避免无关样式变化被意外包含。
  • 硬编码成功校验的
    stroke-dasharray
    ——代码片段中
    20
    是占位符。请替换为
    path.getTotalLength()
    向上取整1后的值，否则描边会提前显示或过度绘制。
  • 在CSS中设置
    transition-timing-function
    用于头像组悬停    ——必须在JS中写入
    --shift
    /
    --scale-active
    之前内联设置，以便弹性缓出效果仅在
    mouseleave
    时生效。
  • 将
    .is-error
    和
    .is-shaking
    合并为一个类用于错误状态抖动    ——保持两者独立才能实现抖动重放（移除→回流→重新添加），同时避免整个错误提示闪烁。

Reference files

参考文件

  • 01-card-resize.md — Card resize
  • 02-number-pop-in.md — Number pop-in
  • 03-notification-badge.md — Notification badge
  • 04-text-states-swap.md — Text states swap
  • 05-menu-dropdown.md — Menu dropdown
  • 06-modal.md — Modal open / close
  • 07-panel-reveal.md — Panel reveal
  • 08-page-side-by-side.md — Page side-by-side
  • 09-icon-swap.md — Icon swap
  • 10-success-check.md — Success check
  • 11-avatar-group-hover.md — Avatar group hover
  • 12-error-state-shake.md — Error state shake
  • _root.css — the universal install block on its own, ready to import directly.
  • 01-card-resize.md — 卡片尺寸调整
  • 02-number-pop-in.md — 数字弹出
  • 03-notification-badge.md — 通知徽章
  • 04-text-states-swap.md — 文本状态切换
  • 05-menu-dropdown.md — 菜单下拉
  • 06-modal.md — 模态框打开/关闭
  • 07-panel-reveal.md — 面板展开
  • 08-page-side-by-side.md — 页面并排切换
  • 09-icon-swap.md — 图标切换
  • 10-success-check.md — 成功校验
  • 11-avatar-group-hover.md — 头像组悬停
  • 12-error-state-shake.md — 错误状态抖动
  • _root.css — 独立的通用安装块，可直接导入。",