tmui-cli 2.0.2 → 2.0.4

package/data/uniappx/css/align-self.md

@@ -0,0 +1,291 @@
+## align-self
+
+align-self 属性在 Flex 弹性布局中设置元素在容器中的交叉轴方向的对齐方式，覆盖父元素设置的 align-items 值。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 3.9 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| 5.21 | 5.11 | 5.0 |
+
+### 语法
+```
+align-self: auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>;
+```
+
+### 值限制
+- enum
+
+### align-self 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| auto | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 默认值。与父元素的 align-items 值一致。 |
+| center | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 元素在交叉轴上居中。如果元素在交叉轴上的尺寸（高度/宽度）大于其容器，那么在两个方向均等溢出。 |
+| flex-start | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 元素在交叉轴上对齐起始位置。 |
+| flex-end | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 元素在交叉轴上对齐结尾位置。 |
+| stretch | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 如果元素未设置高度或设为auto，将占满整个容器的高度。 |
+| baseline | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 所有元素向基线对齐。交叉轴起点到元素基线距离最大的元素将会于交叉轴起点对齐以确定基线。 |
+
+### 默认值 @default-value 
+ `auto`
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/flex/align-self.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/flex/align-self.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/flex/align-self
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/flex/align-self
+
+>示例
+```vue
+<template>
+  
+  <scroll-view class="uni-theme-root" style="flex: 1">
+  
+  <view class="css-page uni-theme-root" style="flex-grow: 1;">
+    <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
+    <view>
+      <text class="theme-label">align-self: auto</text>
+      <view class="demo-box">
+        <view class="demo-container align-start">
+          <view class="common" style="align-self: auto;"></view>
+        </view>
+        <view class="demo-container align-start">
+          <view class="common" style="align-self: auto;" flatten></view>
+        </view>
+      </view>
+    </view>
+
+    <view class="uni-common-mt">
+      <text class="theme-label">align-self: center</text>
+      <view class="demo-box">
+        <view class="demo-container align-center">
+          <view class="common" style="align-self: center;"></view>
+        </view>
+        <view class="demo-container align-center">
+          <view class="common" style="align-self: center;" flatten></view>
+        </view>
+      </view>
+    </view>
+
+    <view class="uni-common-mt">
+      <text class="theme-label">align-self: flex-start</text>
+      <view class="demo-box">
+        <view class="demo-container align-start">
+          <view class="common" style="align-self: flex-start;"></view>
+        </view>
+        <view class="demo-container align-start">
+          <view class="common" style="align-self: flex-start;" flatten></view>
+        </view>
+      </view>
+    </view>
+
+    <view class="uni-common-mt">
+      <text class="theme-label">align-self: flex-end</text>
+      <view class="demo-box">
+        <view class="demo-container">
+          <view class="common" style="align-self: flex-end;"></view>
+        </view>
+        <view class="demo-container">
+          <view class="common" style="align-self: flex-end;" flatten></view>
+        </view>
+      </view>
+    </view>
+
+    <view class="uni-common-mt">
+      <text class="theme-label">align-self: stretch</text>
+      <view class="demo-box">
+        <view class="demo-container">
+          <view class="common" style="align-self: stretch;"></view>
+        </view>
+        <view class="demo-container">
+          <view class="common" style="align-self: stretch;" flatten></view>
+        </view>
+      </view>
+    </view>
+
+    <view class="uni-common-mt">
+      <text class="uni-title-text">scroll-view 组件</text>
+    </view>
+
+    <view class="demo-box">
+      <view class="demo-container align-center">
+        <scroll-view class="common" style="align-self: center;" direction="horizontal">
+          <text class="scroll-view-label">align-self: center</text>
+        </scroll-view>
+      </view>
+      <view class="demo-container align-center">
+        <scroll-view class="common" style="align-self: flex-start;" direction="horizontal">
+          <text class="scroll-view-label">align-self: flex-start</text>
+        </scroll-view>
+      </view>
+    </view>
+
+    <view class="uni-common-mt">
+      <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取</text>
+    </view>
+
+    
+    <view class="test-container">
+      <view class="test-item">
+        <text class="uni-subtitle-text">view 组件</text>
+        <text class="uni-info">设置值: {{data.alignSelf}}</text>
+        <text class="uni-info">获取值: {{data.alignSelfActual}}</text>
+        <view class="test-box">
+          <view ref="viewRef" class="common test-view" :style="{ alignSelf: data.alignSelf }">
+            <text class="common-text">view</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="test-item">
+        <text class="uni-subtitle-text">text 组件</text>
+        <text class="uni-info">设置值: {{data.alignSelf}}</text>
+        <text class="uni-info">获取值: {{data.alignSelfActualText}}</text>
+        <view class="test-box">
+          <text ref="textRef" class="common cyan-label test-text" :style="{ alignSelf: data.alignSelf }">text</text>
+        </view>
+      </view>
+
+      <view class="test-item">
+        <text class="uni-subtitle-text">image 组件</text>
+        <text class="uni-info">设置值: {{data.alignSelf}}</text>
+        <text class="uni-info">获取值: {{data.alignSelfActualImage}}</text>
+        <view class="test-box">
+          <image ref="imageRef" class="common test-image" :style="{ alignSelf: data.alignSelf }" src="/static/test-image/logo.png"></image>
+        </view>
+      </view>
+    </view>
+
+    
+    <view class="test-container">
+      <view class="test-item">
+        <text class="uni-subtitle-text">view 组件拍平</text>
+        <text class="uni-info">设置值: {{data.alignSelf}}</text>
+        <text class="uni-info">获取值: {{data.alignSelfActualFlat}}</text>
+        <view class="test-box">
+          <view ref="viewRefFlat" class="common test-view-flatten" :style="{ alignSelf: data.alignSelf }" flatten>
+            <text class="common-text">view</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="test-item">
+        <text class="uni-subtitle-text">text 组件拍平</text>
+        <text class="uni-info">设置值: {{data.alignSelf}}</text>
+        <text class="uni-info">获取值: {{data.alignSelfActualTextFlat}}</text>
+        <view class="test-box">
+          <text ref="textRefFlat" class="common cyan-label test-text-flatten" :style="{ alignSelf: data.alignSelf }" flatten>text</text>
+        </view>
+      </view>
+
+      <view class="test-item">
+        <text class="uni-subtitle-text">image 组件拍平</text>
+        <text class="uni-info">设置值: {{data.alignSelf}}</text>
+        <text class="uni-info">获取值: {{data.alignSelfActualImageFlat}}</text>
+        <view class="test-box">
+          <image ref="imageRefFlat" class="common test-image-flatten" :style="{ alignSelf: data.alignSelf }" flatten src="/static/test-image/logo.png"></image>
+        </view>
+      </view>
+    </view>
+
+    <view class="uni-common-mt uni-common-mb">
+      <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+      <enum-data :items="alignSelfEnum" title="align-self 枚举值" @change="radioChangeAlignSelf" :compact="true"></enum-data>
+      <input-data :defaultValue="data.alignSelf" title="align-self 自定义值" type="text" @confirm="inputChangeAlignSelf"></input-data>
+    </view>
+
+    
+      <text class="uni-title-text uni-common-mt">native-view 组件：align-self: center 和 flex-start</text>
+      <text class="uni-subtitle-text">native-view 作为 flex 子项</text>
+      <view class="demo-box uni-common-mb">
+        <view class="demo-container align-center">
+          <test-native-view class="common" style="align-self: center;"></test-native-view>
+        </view>
+        <view class="demo-container align-center">
+          <test-native-view class="common" style="align-self: flex-start;"></test-native-view>
+        </view>
+      </view>
+    
+  </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .theme-label {
+    color: var(--text-color, #333333);
+  }
+
+  .cyan-label,
+  .common-text,
+  .scroll-view-label {
+    color: #1a1a1a;
+  }
+
+  .demo-container {
+    display: flex;
+    background-color: #cdcbcb;
+    border: #ddd solid 1px;
+    flex: 1;
+    margin: 0 10px;
+  }
+  .demo-box {
+    flex-direction: row;
+    margin-top: 10px;
+    justify-content: space-around;
+  }
+
+  .align-start {
+    align-items: flex-start;
+  }
+
+  .align-center {
+    align-items: center;
+  }
+
+  .common {
+    width: 80px;
+    height: 80px;
+    background-color: cyan;
+  }
+
+  .common-text {
+    width: 50px;
+  }
+
+  .test-container {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  .test-item {
+    flex: 1;
+    margin: 0 5px;
+  }
+
+  .test-box {
+    display: flex;
+    width: 100%;
+    height: 80px;
+    background-color: gray;
+    align-items: flex-start;
+  }
+
+  .scroll-view-label {
+    font-size: 12px;
+    text-align: center;
+  }
+</style>
+
+```
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/align-self)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex.align-self)

package/data/uniappx/css/animation-composition.md

@@ -0,0 +1,33 @@
+## animation-composition
+
+The animation-composition CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.
+
+### uni-app x 兼容性 
+| Android | iOS | HarmonyOS |
+| :- | :- | :- |
+| x | x | x |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+animation-composition: <single-animation-composition>#;
+```
+
+### animation-composition 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| replace | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | The effect value overrides the underlying value of the property. This is the default value. |
+| add | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | The effect value builds on the underlying value of the property. This operation produces an additive effect. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value. |
+| accumulate | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | The effect and underlying values are combined. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value. |
+
+### 默认值 @default-value 
+ `replace`
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-composition)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-composition)

package/data/uniappx/css/animation-delay.md

@@ -0,0 +1,26 @@
+## animation-delay
+
+animation-delay CSS 属性指定从应用动画到元素开始执行动画之前等待的时间量。动画可以稍后开始、立即从开头开始或立即开始并在动画中途播放。
+
+### uni-app x 兼容性 
+| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- |
+| x | 5.25 | x | 5.25 | x | 5.25 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+animation-delay: <time>#;
+```
+
+### 默认值 @default-value 
+ `0s`
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-delay)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-delay)

package/data/uniappx/css/animation-direction.md

@@ -0,0 +1,34 @@
+## animation-direction
+
+animation-direction CSS 属性设置动画是应正向播放、反向播放还是在正向和反向之间交替播放。
+
+### uni-app x 兼容性 
+| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- |
+| x | 5.25 | x | 5.25 | x | 5.25 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+animation-direction: <single-animation-direction>#;
+```
+
+### animation-direction 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| alternate | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 动画在每个循环中正反交替播放，第一次迭代是正向播放。确定循环是奇数还是偶数的计数从 1 开始。 |
+| alternate-reverse | Android(Vapor) x / iOS(Vapor) x（部分支持，见上） | 动画在每个循环中正反交替播放，第一次迭代是反向播放。确定循环是奇数还是偶数的计数从 1 开始。 |
+| normal | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 动画在每个循环中正向播放。换句话说，每次动画循环时，动画将重置为起始状态并重新开始。这是默认值。 |
+| reverse | Android(Vapor) x / iOS(Vapor) x（部分支持，见上） | 动画在每个循环中反向播放。换句话说，每次动画循环时，动画将重置为结束状态并重新开始。动画步骤将反向执行，并且时间函数也将被反转。例如，ease-in 时间函数变为 ease-out。 |
+
+### 默认值 @default-value 
+ `normal`
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-direction)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-direction)

package/data/uniappx/css/animation-duration.md

@@ -0,0 +1,31 @@
+## animation-duration
+
+animation-duration CSS 属性设置动画完成一个动画周期所需的时间。
+
+### uni-app x 兼容性 
+| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- |
+| x | 5.25 | x | 5.25 | x | 5.25 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+animation-duration: <time>#;
+```
+
+### animation-duration 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| auto | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） | For time-based animations, auto is equivalent to a value of 0s (see below). For CSS scroll-driven animations, auto fills the entire timeline with the animation. |
+
+### 默认值 @default-value 
+ `0s`
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-duration)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-duration)

package/data/uniappx/css/animation-fill-mode.md

@@ -0,0 +1,34 @@
+## animation-fill-mode
+
+CSS 属性 animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。
+
+### uni-app x 兼容性 
+| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- |
+| x | 5.25 | x | 5.25 | x | 5.25 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+animation-fill-mode: <single-animation-fill-mode>#;
+```
+
+### animation-fill-mode 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| backwards | Android(Vapor) x / iOS(Vapor) x / HarmonyOS(Vapor) x（部分支持，见上） | 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值：<br/>    <br/>      <br/>        <br/>          animation-direction<br/>          first relevant keyframe<br/>        <br/>      <br/>      <br/>        <br/>          normal or alternate<br/>          0% or from<br/>        <br/>        <br/>          reverse or alternate-reverse<br/>          100% or to |
+| both | Android(Vapor) x / iOS(Vapor) x / HarmonyOS(Vapor) x（部分支持，见上） | 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 |
+| forwards | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 目标将保留由执行期间遇到的最后一个关键帧 (en-US)计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值：<br/>    <br/>      <br/>        <br/>          animation-direction<br/>          animation-iteration-count<br/>          last keyframe encountered<br/>        <br/>      <br/>      <br/>        <br/>          normal<br/>          even or odd<br/>          100% or to<br/>        <br/>        <br/>          reverse<br/>          even or odd<br/>          0% or from<br/>        <br/>        <br/>          alternate<br/>          even<br/>          0% or from<br/>        <br/>        <br/>          alternate<br/>          odd<br/>          100% or to<br/>        <br/>        <br/>          alternate-reverse<br/>          even<br/>          100% or to<br/>        <br/>        <br/>          alternate-reverse<br/>          odd<br/>          0% or from |
+| none | Android(Vapor) x / iOS(Vapor) x / HarmonyOS(Vapor) x（部分支持，见上） | 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。 |
+
+### 默认值 @default-value 
+ `none`
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-fill-mode)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-fill-mode)

package/data/uniappx/css/animation-iteration-count.md

@@ -0,0 +1,31 @@
+## animation-iteration-count
+
+animation-iteration-count CSS 属性设置动画序列在停止前应播放的次数
+
+### uni-app x 兼容性 
+| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- |
+| x | 5.25 | x | 5.25 | x | 5.25 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+animation-iteration-count: <single-animation-iteration-count>#;
+```
+
+### animation-iteration-count 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| infinite | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 无限循环播放动画。 |
+
+### 默认值 @default-value 
+ `1`
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-iteration-count)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-iteration-count)

package/data/uniappx/css/animation-name.md

@@ -0,0 +1,31 @@
+## animation-name
+
+animation-name CSS 属性指定一个或多个 @keyframes at-rule 的名称，这些 at-rule 描述了要应用于元素的动画。多个 @keyframes at-rule 以逗号分隔的名称列表的形式指定。如果指定的名称不匹配任何 @keyframes at-rule，则不会对任何属性进行动画处理。
+
+### uni-app x 兼容性 
+| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- |
+| x | 5.25 | x | 5.25 | x | 5.25 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+animation-name: [ none | <keyframes-name> ]#;
+```
+
+### animation-name 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| none | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 一个特殊的关键字，表示没有关键帧。它可用于禁用动画，而不改变其他标识符的顺序，或禁用级联的动画。 |
+
+### 默认值 @default-value 
+ `none`
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-name)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-name)

package/data/uniappx/css/animation-play-state.md

@@ -0,0 +1,32 @@
+## animation-play-state
+
+animation-play-state CSS 属性设置动画是运行还是暂停。
+
+### uni-app x 兼容性 
+| Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- |
+| x | 5.25 | x | 5.25 | x | 5.25 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+animation-play-state: <single-animation-play-state>#;
+```
+
+### animation-play-state 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| paused | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 当前动画已被停止。 |
+| running | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 当前动画正在运行。 |
+
+### 默认值 @default-value 
+ `running`
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-play-state)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-play-state)

package/data/uniappx/css/animation-range-end.md

@@ -0,0 +1,26 @@
+## animation-range-end
+
+The animation-range-end CSS property is used to set the end of an animation's attachment range along its timeline, i.e. where along the timeline an animation will end.
+
+### uni-app x 兼容性 
+| Android | iOS | HarmonyOS |
+| :- | :- | :- |
+| x | x | x |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+animation-range-end: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#;
+```
+
+### 默认值 @default-value 
+ `normal`
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-range-end)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-range-end)

package/data/uniappx/css/animation-range-start.md

@@ -0,0 +1,26 @@
+## animation-range-start
+
+The animation-range-start CSS property is used to set the start of an animation's attachment range along its timeline, i.e. where along the timeline an animation will start.
+
+### uni-app x 兼容性 
+| Android | iOS | HarmonyOS |
+| :- | :- | :- |
+| x | x | x |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+animation-range-start: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#;
+```
+
+### 默认值 @default-value 
+ `normal`
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-range-start)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-range-start)

package/data/uniappx/css/animation-range.md

@@ -0,0 +1,34 @@
+## animation-range
+
+The animation-range CSS shorthand property is used to set the start and end of an animation's attachment range along its timeline, i.e. where along the timeline an animation will start and end.
+
+### uni-app x 兼容性 
+| Android | iOS | HarmonyOS |
+| :- | :- | :- |
+| x | x | x |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+animation-range: [ <'animation-range-start'> <'animation-range-end'>? ]#;
+```
+
+### animation-range 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| normal | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Represents the start of the timeline in the case of animation-range-start and the end of the timeline in the case of animation-range-end. This is the default value. |
+| cover | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Represents the full range of a named view progress timeline (see CSS scroll-driven animations for more details), from the point where the subject element first starts to enter the scroll port's view progress visibility range (0% progress) to the point where it has completely left it (100% progress). |
+| contain | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Represents the range of a named view progress timeline where the subject element is fully contained by, or fully contains, the scroll port's view progress visibility range.<br/>        <br/>          If the subject element is smaller than the scrollport, it ranges from the point where the subject element is first completely contained by the scroll port (0% progress), to the point where it is no longer completely contained by the scroll port (100% progress).<br/>          If the subject element is larger than the scrollport, it ranges from the point where the subject element first completely covers the scroll port (0% progress), to the point where it no longer completely covers the scroll port (100% progress). |
+| entry | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Represents the range of a named view progress timeline from the point where the subject element first starts to enter the scroll port (0% progress), to the point where it has completely entered the scroll port (100%). |
+| exit | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Represents the range of a named view progress timeline from the point where the subject element first starts to exit the scroll port (0% progress), to the point where it has completely exited the scroll port (100%). |
+| entry-crossing | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Represents the range of a named view progress timeline from the point where the subject element first starts to cross the scroll port's starting edge (0% progress), to the point where it has completely crossed the scroll port's starting edge (100%). |
+| exit-crossing | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | Represents the range of a named view progress timeline from the point where the subject element first starts to cross the scroll port's end edge (0% progress), to the point where it has completely crossed the scroll port's end edge (100%). |
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/animation-range)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.animation-range)