Remix 3 组件的入场与退出动画怎么实现【免费下载链接】remixThe fully-stacked web framework项目地址: https://gitcode.com/GitHub_Trending/re/remix在一个 Remix 3 应用里你常遇到这样的需求节点出现时从某个起始样式淡入或移入消失时先留场播完一段退出动画再从 DOM 中移除。Remix 3 的 UI 包为此提供了animateEntrance与animateExit两个动画 mixin子路径remix/ui/animation配合clientEntry定义的客户端组件使用。本文给出从官方 Animation 章节整理的完整写法、时序配置方式和可对照的验证路径。先判断纯 CSS 过渡够不够官方 Animation 章节划定的边界是hover、focus、active、checked、open、selected 以及 reduced-motion 这些浏览器已经拥有状态的场景优先用 CSS不需要引入 JavaScript 状态——除非你的渲染输出也依赖这些状态。const cardStyle css({ border: 1px solid #d6d6d6, transition: transform 160ms ease, box-shadow 160ms ease, :hover, :focus-visible: { boxShadow: 0 12px 32px rgba(15, 17, 21, 0.14), transform: translateY(-2px), }, media (prefers-reduced-motion: reduce): { transition: none, }, });当动效依赖渲染状态时才使用动画 mixin一个节点进入、一个节点退出、一个带 key 的条目发生移动或者某个事件需要可中断的动画。入场与退出属于前两类。用显隐切换实现入场与退出两个 mixin 的含义来自章节正文与 animation 模块 READMEanimateEntrance(...)在宿主节点被插入时运行从给定关键帧动画到节点的自然样式animateExit(...)让被移除的节点保留在 DOM 中直到退出动画结束。官方示例是一个可切换显隐的提示条文件位于app/ui/public/notice.tsximport { clientEntry, css, on } from remix/ui; import { animateEntrance, animateExit, spring } from remix/ui/animation; import type { Handle } from remix/ui; export const Notice clientEntry(import.meta.url, function Notice(handle: Handle) { let visible true; return () ( div button mix{[ on(click, () { visible !visible; handle.update(); }), ]} typebutton Toggle notice /button {visible ( p keynotice mix{[ noticeStyle, animateEntrance({ opacity: 0, transform: translateY(8px), ...spring(snappy), }), animateExit({ opacity: 0, transform: translateY(-8px), ...spring(snappy), }), ]} Settings saved. /p )} /div ); }); const noticeStyle css({ borderRadius: 12px, background: #ecfdf5, color: #065f46, padding: 0.75rem 1rem, });写法要点组件用clientEntry(import.meta.url, ...)定义。入场/退出的动画执行发生在浏览器端这类交互组件属于浏览器运行时入口。入场/退出 mixin 放进会随条件渲染插入或移除的那个节点的mix数组配置对象里写关键帧from 样式和时序。元素必须带稳定的key。章节原文在相关元素之间切换时稳定的 key 告诉 Remix 哪个节点在入场、在退出、在被替换。动画配置类型是AnimateMixinConfig样式属性会被复制进 WAAPI 关键帧而duration、easing、delay、composite、initial按选项处理。因此既可以像示例那样展开...spring(...)也可以直接写duration: 120, easing: ease-in。动画时序怎么选springspring()返回一个SpringIterator有三种用法展开到动画选项、字符串化为 CSS transition 语法、迭代出 0 到 1 的进度值用于自定义 JS 动画。内置预设来自 Spring API 文档预设Bounce特性smooth-0.3过阻尼无过冲snappy0临界阻尼快默认预设bouncy0.3欠阻尼可见回弹预设的 duration 在仓库两处文档里不一致packages/ui/docs/spring.md 给出smooth400ms /snappy200ms /bouncy300ms而 packages/ui/src/animation/README.md 把bouncy标为 400ms。需要精确数值时以运行时spring.presets读取到的值为准不要硬编码。第二个参数可以覆盖预设的 duration 或初速度spring(bouncy, { duration: 300 }); spring(snappy, { velocity: 2 });需要完全控制时显式传参spring({ duration: 500, bounce: 0.35, velocity: 0 });bounce取值 -1 到 1负值为过阻尼缓慢收敛、无过冲0 为临界阻尼正值为欠阻尼会冲过目标值。对普通 CSS transition也可以用 spring 生成transition值let panelTransition spring.transition([opacity, transform], snappy);影响写法的几处行为细节这些行为直接决定入场/退出代码的边界条件均出自 Animation 章节与 animation 模块 README传true使用默认的不透明度动画传false以及null/undefined禁用该 mixin但不改动周围的mix数组例如div mix{[animateEntrance(true), animateExit(false)]} /。animateEntrance({ initial: false })跳过某个 key 在父节点内的第一次插入动画同一 key 之后的插入仍然会动画。如果同一个带 key 的元素在退出动画结束前又被渲染回来Remix 会回收该 DOM 节点并把它动画回渲染样式而不是把退出动画倒着放一遍。当被移除的节点可能被回收或在列表更新间保留时animateExit需要带 key 的元素。中断是默认路径DOM 再次变化时动画 mixin 会取消或替换正在进行的工作CSS transition 同样可中断——过渡进行途中改目标值浏览器会从当前视觉状态动画到新值。仓库里还有可直接对照的极简示例enter 示例animateEntrance({ opacity: 0, transform: scale(0), ...spring({ duration: 400, bounce: 0.5 }) })exit 示例入场用spring(snappy)、退出用无参spring()按钮点击切换isVisible后调用handle.update()。运行与验证在基于官方模板的 Remix 3 应用中模板 README 给出的命令是npm i npm run devnpm run dev启动后打开对应页面点击切换按钮按文档描述的两个行为核对插入时节点从animateEntrance指定的关键帧动画到自然样式移除时节点保留在 DOM 中直到animateExit动画结束后才消失。类型层面可用模板提供的npm run typecheck做检查。尊重 reduced-motion章节要求先在 CSS 边界处理prefers-reduced-motion因为它在 JavaScript 加载前就生效并且覆盖服务端渲染的帧const panelStyle css({ transition: opacity 180ms ease, transform 180ms ease, media (prefers-reduced-motion: reduce): { transition: none, transform: none, }, });对 JavaScript 驱动的动效在启动前检查同一 media queryexport function prefersReducedMotion() { return window.matchMedia((prefers-reduced-motion: reduce)).matches; }reduced motion 不意味着完全没有反馈章节建议改用更短的淡入、即时的布局变化或不依赖位移的状态变化。参考文档Animation 章节入场/退出、布局动画、spring 与 reduced-motion 的完整写法animation 模块 READMEAPI 列表与行为说明Spring API预设、自定义参数与迭代用法【免费下载链接】remixThe fully-stacked web framework项目地址: https://gitcode.com/GitHub_Trending/re/remix创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考