uni-app x 中 animation-play-state 属性的完整使用指南动画暂停与继续控制【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app导读animation-play-state是 CSS 动画体系中用于控制动画运行/暂停状态的关键属性通过它可以在不重启动画序列的前提下随时让动画冻结在某一帧或从暂停处继续播放。本文以 uni-app x 的 animation-play-state 属性文档 为核心结合仓库中的 CSS 概述、动画简写属性文档 以及 loading 组件的真实源码完整讲解该属性在 uni-app x 各平台Android、iOS、HarmonyOS含 VDOM 与 Vapor 蒸汽模式的语法、取值、兼容性与工程实践帮助你正确实现加载动画暂停、播放器状态切换等交互效果。一、属性定义与作用animation-play-state是标准 CSS 属性用于设置动画是运行running还是暂停paused。它在 uni-app x 的 CSS 子集ucss中同样可用。uni-app x 在 App 平台实现的是 Web CSS 的子集动画相关属性是这个子集的重要组成部分——完整清单可查看 CSS 概述 - 样式清单 中的animation系列条目。该属性与动画体系中的其他属性配合使用是animation简写属性见 animation 简写文档所包含的八个子属性之一animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state本文主题二、uni-app x 平台兼容性原文档给出的 uni-app x 兼容性矩阵如下| 平台 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) | | :- | :- | :- | :- | :- | :- | :- | | animation-play-state | x | 5.25 | x | 5.25 | x | 5.25 |解读x表示对应模式暂不支持。5.25表示该属性自 uni-app xHBuilderX5.25 版本起在 Android、iOS、HarmonyOS 的Vapor蒸汽模式下可用。也就是说目前该属性仅在App 平台的蒸汽Vapor渲染模式下获得支持VDOM 模式下暂不可用。如果你的页面运行在蒸汽模式并希望使用动画暂停能力请确保编译器版本不低于 5.25。说明蒸汽Vapor模式是 uni-app x 的一种新型原生渲染架构相关能力说明可参考 app-vapor 文档 与 benchmark 基准测试。三、App 平台拍平flatten兼容性蒸汽模式中的flatten拍平会影响节点的渲染方式不是所有 CSS 属性都支持拍平节点。原文档给出的拍平兼容性如下| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) | | :- | :- | :- | | x | x | x |即animation-play-state在三个平台的蒸汽模式下均不支持拍平。这意味着如果一个节点需要使用该属性就不应为了减少层级而给该节点盲目添加flatten优化。这一限制与 CSS 与标准 CSS 的差异文档 中部分 CSS 属性不支持拍平的说明一致——完整的不支持拍平属性清单包含animation及其全部子属性可查看 CSS 概述 - 不支持拍平的 CSS 属性。四、语法与属性值4.1 语法animation-play-state: single-animation-play-state#;其中#表示可以以逗号分隔声明多个值分别对应动画简写中多个动画animation-name 列表的暂停状态。与标准 CSS 一致animation-play-state可以与动画列表中不同的动画一一对应。4.2 属性值| 名称 | 兼容性 | 描述 | | :- | :- | :- | | paused | Web: 4.0 | 当前动画已被停止。 | | running | Web: 4.0 | 当前动画正在运行。 |要点说明兼容性列中标注的 Web: 4.0表示该取值在 uni-app x 编译到 Web 平台时自 4.0 版本可用App 平台蒸汽模式的版本要求以第二节的兼容性矩阵5.25为准。将属性切换为paused时动画会停留在当前帧而不是跳回起点切回running后从暂停处继续播放。这是实现加载完成停止转圈视频/轮播暂停动画等交互的关键语义。4.3 默认值runninganimation-play-state的默认值为running即未显式声明时动画默认处于运行状态。这符合标准 CSS 行为动画只要满足animation-name、animation-duration等条件就会开始播放。五、工程实践结合 animation 简写使用单独设置animation-play-state没有意义它必须与animation-name指定动画配合通常还伴随animation-duration、animation-iteration-count等属性。下面给出完整的可运行示例。5.1 基本用法类选择器方式template view classdemo view classspinner :class{ spinner-paused: isPaused }/view /view /template script setup const isPaused ref(false) /script style .spinner { width: 40px; height: 40px; border-radius: 100%; border-width: 3px; border-style: solid; border-color: #007aff; border-right-color: transparent; animation-name: spin; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; } .spinner-paused { animation-play-state: paused; } keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /style当isPaused为true时animation-play-state: paused生效旋转动画立即停留在当前帧恢复为false后继续旋转。注意uni-app x App 平台暂不支持 CSSkeyframes详见 CSS 与标准 CSS 的差异需使用 API 方式UniElement 的 animate 方法实现关键帧动画Web、小程序平台可按标准 CSS 使用keyframes。同时 App 平台样式不继承、优先使用简单 class 选择器参见 CSS 概述。5.2 使用简写属性animation-play-state也可以放进animation简写中放在最后且只在支持的位置生效.spinner { animation: spin 1s linear infinite paused; }对应关系可对照 animation 简写属性文档animation是 name、duration、timing-function、delay、iteration-count、direction、fill-mode、play-state 八个子属性的简写形式。5.3 真实源码印证uni-loading 组件仓库中的 uni-loading 加载组件源码 正是animation-play-state的典型使用者。在 Web/小程序分支中.__uni-loading__ { border-radius: 100%; border-width: 1px; border-style: solid; border-color: transparent; animation: k-loading-spin 1.333s infinite; animation-timing-function: linear; } .__uni-loading__paused { animation-play-state: paused; } keyframes k-loading-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }组件模板中通过 class 绑定切换view class__uni-loading__ __loading-4-3__ :class{ __uni-loading__paused: props.paused } :styleloadingStyle/view而paused是组件对外暴露的 prop默认false即是否暂停动画。这提供了很好的工程参考用布尔状态 条件 class 切换animation-play-state是暂停原生 loading 转圈动画的通用做法。六、多动画列表与多值对应语法中的#表示可同时声明多个值。当元素同时运行多个动画例如通过简写声明两个动画名称时可以按序指定各自的状态.multi { animation-name: spin, pulse; animation-duration: 1s, 2s; animation-play-state: running, paused; /* 第一个动画运行第二个暂停 */ }如果只声明一个值则按标准 CSS 规则作用于全部动画未列出的动画沿用默认值running。七、常见问题与注意事项平台差异animation-play-state在 App 平台目前仅蒸汽Vapor模式支持5.25VDOM 模式为 xWeb 端自 4.0 支持。跨端使用时建议先确认目标端能力或提供降级方案如用条件编译#ifdef区分平台。不支持拍平蒸汽模式下该属性不支持 flatten涉及该属性的节点不要添加 flatten 优化详见 不支持拍平的 CSS 属性清单。默认值与 CSS resetuni-app x 会对部分 CSS 默认值做重置以保证跨端一致详见 CSS 概述 - css样式重置。animation-play-state默认值仍为running但动画相关属性的默认值如animation-iteration-count默认1见 animation-iteration-count 文档建议按文档显式确认。不要依赖继承App 平台样式不继承animation-play-state应直接写在需要控制动画的组件上而不是写在父级容器等待子元素继承。八、参见CSS 概述含样式清单与不支持拍平清单animation 简写属性animation-iteration-count 属性uni-app x CSS 与标准 CSS 的差异UniElement animate 动画 API原文档还提供了 MDN Reference 与 DCloud 相关 Bug 追踪入口css 相关 bug 汇总排查兼容性问题时可通过官方 bug 系统检索css.properties.animation-play-state关键词。【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/19 3:44:12 · 阅读 1.2k uni-app x 中 animation-play-state 属性的完整使用指南：动画暂停与继续控制
uni-app x 中 animation-play-state 属性的完整使用指南动画暂停与继续控制【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app导读animation-play-state是 CSS 动画体系中用于控制动画运行/暂停状态的关键属性通过它可以在不重启动画序列的前提下随时让动画冻结在某一帧或从暂停处继续播放。本文以 uni-app x 的 animation-play-state 属性文档 为核心结合仓库中的 CSS 概述、动画简写属性文档 以及 loading 组件的真实源码完整讲解该属性在 uni-app x 各平台Android、iOS、HarmonyOS含 VDOM 与 Vapor 蒸汽模式的语法、取值、兼容性与工程实践帮助你正确实现加载动画暂停、播放器状态切换等交互效果。一、属性定义与作用animation-play-state是标准 CSS 属性用于设置动画是运行running还是暂停paused。它在 uni-app x 的 CSS 子集ucss中同样可用。uni-app x 在 App 平台实现的是 Web CSS 的子集动画相关属性是这个子集的重要组成部分——完整清单可查看 CSS 概述 - 样式清单 中的animation系列条目。该属性与动画体系中的其他属性配合使用是animation简写属性见 animation 简写文档所包含的八个子属性之一animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state本文主题二、uni-app x 平台兼容性原文档给出的 uni-app x 兼容性矩阵如下| 平台 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) | | :- | :- | :- | :- | :- | :- | :- | | animation-play-state | x | 5.25 | x | 5.25 | x | 5.25 |解读x表示对应模式暂不支持。5.25表示该属性自 uni-app xHBuilderX5.25 版本起在 Android、iOS、HarmonyOS 的Vapor蒸汽模式下可用。也就是说目前该属性仅在App 平台的蒸汽Vapor渲染模式下获得支持VDOM 模式下暂不可用。如果你的页面运行在蒸汽模式并希望使用动画暂停能力请确保编译器版本不低于 5.25。说明蒸汽Vapor模式是 uni-app x 的一种新型原生渲染架构相关能力说明可参考 app-vapor 文档 与 benchmark 基准测试。三、App 平台拍平flatten兼容性蒸汽模式中的flatten拍平会影响节点的渲染方式不是所有 CSS 属性都支持拍平节点。原文档给出的拍平兼容性如下| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) | | :- | :- | :- | | x | x | x |即animation-play-state在三个平台的蒸汽模式下均不支持拍平。这意味着如果一个节点需要使用该属性就不应为了减少层级而给该节点盲目添加flatten优化。这一限制与 CSS 与标准 CSS 的差异文档 中部分 CSS 属性不支持拍平的说明一致——完整的不支持拍平属性清单包含animation及其全部子属性可查看 CSS 概述 - 不支持拍平的 CSS 属性。四、语法与属性值4.1 语法animation-play-state: single-animation-play-state#;其中#表示可以以逗号分隔声明多个值分别对应动画简写中多个动画animation-name 列表的暂停状态。与标准 CSS 一致animation-play-state可以与动画列表中不同的动画一一对应。4.2 属性值| 名称 | 兼容性 | 描述 | | :- | :- | :- | | paused | Web: 4.0 | 当前动画已被停止。 | | running | Web: 4.0 | 当前动画正在运行。 |要点说明兼容性列中标注的 Web: 4.0表示该取值在 uni-app x 编译到 Web 平台时自 4.0 版本可用App 平台蒸汽模式的版本要求以第二节的兼容性矩阵5.25为准。将属性切换为paused时动画会停留在当前帧而不是跳回起点切回running后从暂停处继续播放。这是实现加载完成停止转圈视频/轮播暂停动画等交互的关键语义。4.3 默认值runninganimation-play-state的默认值为running即未显式声明时动画默认处于运行状态。这符合标准 CSS 行为动画只要满足animation-name、animation-duration等条件就会开始播放。五、工程实践结合 animation 简写使用单独设置animation-play-state没有意义它必须与animation-name指定动画配合通常还伴随animation-duration、animation-iteration-count等属性。下面给出完整的可运行示例。5.1 基本用法类选择器方式template view classdemo view classspinner :class{ spinner-paused: isPaused }/view /view /template script setup const isPaused ref(false) /script style .spinner { width: 40px; height: 40px; border-radius: 100%; border-width: 3px; border-style: solid; border-color: #007aff; border-right-color: transparent; animation-name: spin; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; } .spinner-paused { animation-play-state: paused; } keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /style当isPaused为true时animation-play-state: paused生效旋转动画立即停留在当前帧恢复为false后继续旋转。注意uni-app x App 平台暂不支持 CSSkeyframes详见 CSS 与标准 CSS 的差异需使用 API 方式UniElement 的 animate 方法实现关键帧动画Web、小程序平台可按标准 CSS 使用keyframes。同时 App 平台样式不继承、优先使用简单 class 选择器参见 CSS 概述。5.2 使用简写属性animation-play-state也可以放进animation简写中放在最后且只在支持的位置生效.spinner { animation: spin 1s linear infinite paused; }对应关系可对照 animation 简写属性文档animation是 name、duration、timing-function、delay、iteration-count、direction、fill-mode、play-state 八个子属性的简写形式。5.3 真实源码印证uni-loading 组件仓库中的 uni-loading 加载组件源码 正是animation-play-state的典型使用者。在 Web/小程序分支中.__uni-loading__ { border-radius: 100%; border-width: 1px; border-style: solid; border-color: transparent; animation: k-loading-spin 1.333s infinite; animation-timing-function: linear; } .__uni-loading__paused { animation-play-state: paused; } keyframes k-loading-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }组件模板中通过 class 绑定切换view class__uni-loading__ __loading-4-3__ :class{ __uni-loading__paused: props.paused } :styleloadingStyle/view而paused是组件对外暴露的 prop默认false即是否暂停动画。这提供了很好的工程参考用布尔状态 条件 class 切换animation-play-state是暂停原生 loading 转圈动画的通用做法。六、多动画列表与多值对应语法中的#表示可同时声明多个值。当元素同时运行多个动画例如通过简写声明两个动画名称时可以按序指定各自的状态.multi { animation-name: spin, pulse; animation-duration: 1s, 2s; animation-play-state: running, paused; /* 第一个动画运行第二个暂停 */ }如果只声明一个值则按标准 CSS 规则作用于全部动画未列出的动画沿用默认值running。七、常见问题与注意事项平台差异animation-play-state在 App 平台目前仅蒸汽Vapor模式支持5.25VDOM 模式为 xWeb 端自 4.0 支持。跨端使用时建议先确认目标端能力或提供降级方案如用条件编译#ifdef区分平台。不支持拍平蒸汽模式下该属性不支持 flatten涉及该属性的节点不要添加 flatten 优化详见 不支持拍平的 CSS 属性清单。默认值与 CSS resetuni-app x 会对部分 CSS 默认值做重置以保证跨端一致详见 CSS 概述 - css样式重置。animation-play-state默认值仍为running但动画相关属性的默认值如animation-iteration-count默认1见 animation-iteration-count 文档建议按文档显式确认。不要依赖继承App 平台样式不继承animation-play-state应直接写在需要控制动画的组件上而不是写在父级容器等待子元素继承。八、参见CSS 概述含样式清单与不支持拍平清单animation 简写属性animation-iteration-count 属性uni-app x CSS 与标准 CSS 的差异UniElement animate 动画 API原文档还提供了 MDN Reference 与 DCloud 相关 Bug 追踪入口css 相关 bug 汇总排查兼容性问题时可通过官方 bug 系统检索css.properties.animation-play-state关键词。【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考