refactor(Skeleton): 适配v16

src/packages/configprovider/types.ts

@@ -856,6 +856,7 @@ export type NutCSSVariables =
   | 'nutuiSkeletonLineNormalHeight'
   | 'nutuiSkeletonLineLargeHeight'
   | 'nutuiSkeletonLineBorderRadius'
+  | 'nutuiSkeletonAnimationColor'
   | 'nutuiCardBorderRadius'
   | 'nutuiGridBorderWidth'
   | 'nutuiGridBorderColor'

src/packages/skeleton/__test__/skeleton.spec.tsx

@@ -9,6 +9,11 @@ test('should allow to disable animation', () => {
   expect(container.querySelector('.nut-skeleton-animation')).toBeFalsy()
 })
 
+test('should render animated element by default', () => {
+  const { container } = render(<Skeleton rows={1} />)
+  expect(container.querySelector('.nut-skeleton-animated')).toBeTruthy()
+})
+
 test('should set duration', () => {
   const { container } = render(<Skeleton rows={1} duration={2} />)
   const animation = container.querySelector('.nut-skeleton-animated')

src/packages/skeleton/doc.en-US.md

@@ -57,10 +57,10 @@ import { Skeleton } from '@nutui/nutui-react'
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | visible | Whether to show skeleton screen (true: hide skeleton, false: show skeleton) | `boolean` | `true` |
-| animated | Whether to enable skeleton animation | `boolean` | `false` |
+| animated | Whether to enable skeleton animation | `boolean` | `true` |
 | size | Specify the built-in height | `'small' \| 'normal' \| 'large'` | `normal` |
 | shape | Set shape | `'square' \| 'round' \| 'circle'` | `round` |
-| duration | Animation duration | `number` | `0.6` |
+| duration | Animation duration | `number` | `0.4` |
 | rows | Set number of rows | `number` | `1` |
 | width | Set width, higher priority than `size` property | `string\|number` | `-` |
 | height | Set height, higher priority than `size` property | `string\|number` | `-` |
@@ -73,11 +73,12 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-skeleton-background | Background | `rgb(239, 239, 239)` |
+| \--nutui-skeleton-background | Background | `#f2f3f5` |
 | \--nutui-skeleton-line-width | Line width | `100%` |
 | \--nutui-skeleton-line-small-height | Line height | `16px` |
-| \--nutui-skeleton-line-normal-height | Line height | `24px` |
-| \--nutui-skeleton-line-large-height | Line height | `32px` |
+| \--nutui-skeleton-line-normal-height | Line height | `20px` |
+| \--nutui-skeleton-line-large-height | Line height | `28px` |
 | \--nutui-skeleton-line-border-radius | Line border radius | `4px` |
+| \--nutui-skeleton-animation-color | Loading shimmer color (opacity auto-reduced in dark mode) | `rgba(255, 255, 255, 0.5)` |
 
 <Contribution name="Skeleton" />

src/packages/skeleton/doc.md

@@ -57,10 +57,10 @@ import { Skeleton } from '@nutui/nutui-react'
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | `true` |
-| animated | 是否开启骨架屏动画 | `boolean` | `false` |
+| animated | 是否开启骨架屏动画 | `boolean` | `true` |
 | size | 指定使用的内置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
 | shape | 设置形状 | `'square' \| 'round' \| 'circle'` | `round` |
-| duration | 动画时长 | `number` | `0.6` |
+| duration | 动画时长 | `number` | `0.4` |
 | rows | 设置行数 | `number` | `1` |
 | width | 设置宽度，优先级高于 `size` 属性 | `string\|number` | `-` |
 | height | 设置高度，优先级高于 `size` 属性 | `string\|number` | `-` |
@@ -73,11 +73,12 @@ import { Skeleton } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` |
+| \--nutui-skeleton-background | 背景 | `#f2f3f5` |
 | \--nutui-skeleton-line-width | 线条宽度 | `100%` |
 | \--nutui-skeleton-line-small-height | 线条高度 | `16px` |
-| \--nutui-skeleton-line-normal-height | 线条高度 | `24px` |
-| \--nutui-skeleton-line-large-height | 线条高度 | `32px` |
+| \--nutui-skeleton-line-normal-height | 线条高度 | `20px` |
+| \--nutui-skeleton-line-large-height | 线条高度 | `28px` |
 | \--nutui-skeleton-line-border-radius | 线条边框圆角 | `4px` |
+| \--nutui-skeleton-animation-color | 加载光影颜色（暗黑模式下自动降低透明度） | `rgba(255, 255, 255, 0.5)` |
 
 <Contribution name="Skeleton" />

src/packages/skeleton/doc.taro.md

@@ -57,10 +57,10 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | `true` |
-| animated | 是否开启骨架屏动画 | `boolean` | `false` |
+| animated | 是否开启骨架屏动画 | `boolean` | `true` |
 | size | 指定使用的内置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
 | shape | 设置形状 | `'square' \| 'round' \| 'circle'` | `round` |
-| duration | 动画时长 | `number` | `0.6` |
+| duration | 动画时长 | `number` | `0.4` |
 | rows | 设置行数 | `number` | `1` |
 | width | 设置宽度，优先级高于 `size` 属性 | `string\|number` | `-` |
 | height | 设置高度，优先级高于 `size` 属性 | `string\|number` | `-` |
@@ -73,11 +73,12 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` |
+| \--nutui-skeleton-background | 背景 | `#f2f3f5` |
 | \--nutui-skeleton-line-width | 线条宽度 | `100%` |
 | \--nutui-skeleton-line-small-height | 线条高度 | `16px` |
-| \--nutui-skeleton-line-normal-height | 线条高度 | `24px` |
-| \--nutui-skeleton-line-large-height | 线条高度 | `32px` |
+| \--nutui-skeleton-line-normal-height | 线条高度 | `20px` |
+| \--nutui-skeleton-line-large-height | 线条高度 | `28px` |
 | \--nutui-skeleton-line-border-radius | 线条边框圆角 | `4px` |
+| \--nutui-skeleton-animation-color | 加载光影颜色（暗黑模式下自动降低透明度） | `rgba(255, 255, 255, 0.5)` |
 
 <Contribution name="Skeleton" />

src/packages/skeleton/doc.zh-TW.md

@@ -57,10 +57,10 @@ import { Skeleton } from '@nutui/nutui-react'
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | visible | 是否顯示骨架屏(true不顯示骨架屏，false顯示骨架屏) | `boolean` | `true` |
-| animated | 是否開啟骨架屏動畫 | `boolean` | `false` |
+| animated | 是否開啟骨架屏動畫 | `boolean` | `true` |
 | size | 指定使用的內置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
 | shape | 設置形狀 | `'square' \| 'round' \| 'circle'` | `round` |
-| duration | 動畫時長 | `number` | `0.6` |
+| duration | 動畫時長 | `number` | `0.4` |
 | rows | 設置行數 | `number` | `1` |
 | width | 設置寬度，優先級高於 `size` 屬性 | `string\|number` | `-` |
 | height | 設置高度，優先級高於 `size` 屬性 | `string\|number` | `-` |
@@ -73,11 +73,12 @@ import { Skeleton } from '@nutui/nutui-react'
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` |
+| \--nutui-skeleton-background | 背景 | `#f2f3f5` |
 | \--nutui-skeleton-line-width | 線條寬度 | `100%` |
 | \--nutui-skeleton-line-small-height | 線條高度 | `16px` |
-| \--nutui-skeleton-line-normal-height | 線條高度 | `24px` |
-| \--nutui-skeleton-line-large-height | 線條高度 | `32px` |
+| \--nutui-skeleton-line-normal-height | 線條高度 | `20px` |
+| \--nutui-skeleton-line-large-height | 線條高度 | `28px` |
 | \--nutui-skeleton-line-border-radius | 線條邊框圓角 | `4px` |
+| \--nutui-skeleton-animation-color | 加載光影顏色（暗黑模式下自動降低透明度） | `rgba(255, 255, 255, 0.5)` |
 
 <Contribution name="Skeleton" />

src/packages/skeleton/skeleton.scss

@@ -35,19 +35,20 @@
   &-animation {
     position: absolute;
     top: 0;
-    left: 0;
-    width: 100%;
+    left: -80px;
+    width: 80px;
     height: 100%;
     z-index: 1;
     background: linear-gradient(
       90deg,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0.02) 50%,
-      rgba(0, 0, 0, 0) 100%
+      rgba(255, 255, 255, 0) 0%,
+      $skeleton-animation-color 50%,
+      rgba(255, 255, 255, 0) 100%
     );
+    transform: skewX(-30deg);
     animation-name: nut-skeleton;
     animation-delay: 0s;
-    animation-duration: 0.6s;
+    animation-duration: 0.4s;
     animation-direction: normal;
     animation-fill-mode: both;
     animation-play-state: running;
@@ -56,12 +57,22 @@
   }
 
   @keyframes nut-skeleton {
-    from {
-      transform: translateX(-100%);
+    0% {
+      left: -80px;
+      opacity: 0;
     }
 
-    to {
-      transform: translateX(100%);
+    5% {
+      opacity: 1;
+    }
+
+    95% {
+      opacity: 1;
+    }
+
+    100% {
+      left: 100%;
+      opacity: 0;
     }
   }
 }
@@ -70,19 +81,34 @@
 .nut-rtl .nut-skeleton {
   &-animation {
     left: auto;
-    right: 0;
-    animation: nut-skeleton-rtl 2s linear 0s infinite;
+    right: -80px;
+    transform: skewX(30deg);
+    animation-name: nut-skeleton-rtl;
   }
 
   @keyframes nut-skeleton-rtl {
-    from {
-      //background-position: -200% 0;
-      transform: translateX(100%);
+    0% {
+      right: -80px;
+      opacity: 0;
+    }
+
+    5% {
+      opacity: 1;
+    }
+
+    95% {
+      opacity: 1;
     }
 
-    to {
-      //background-position: 200% 0;
-      transform: translateX(-100%);
+    100% {
+      right: 100%;
+      opacity: 0;
     }
   }
 }
+
+.nut-theme-dark {
+  // 组件级覆盖
+  // skeleton 加载光影：暗黑下背景近黑，白色光影对比过强，降低透明度
+  --nutui-skeleton-animation-color: var(--nutui-black-3);
+}

src/packages/skeleton/skeleton.taro.tsx

@@ -16,7 +16,7 @@ const defaultProps = {
   visible: false,
   size: 'normal',
   shape: 'round',
-  duration: 0.6,
+  duration: 0.4,
 } as TaroSkeletonProps
 export const Skeleton: FunctionComponent<Partial<TaroSkeletonProps>> = (
   props

src/packages/skeleton/skeleton.tsx

@@ -15,7 +15,7 @@ const defaultProps = {
   visible: false,
   size: 'normal',
   shape: 'round',
-  duration: 0.6,
+  duration: 0.4,
 } as WebSkeletonProps
 export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
   props

src/sites/sites-react/doc/docs/react/migrate-from-v3.en-US.md

@@ -104,3 +104,15 @@ npm install @nutui/nutui-react-taro
   - Added `--nutui-popover-padding-horizontal`, `--nutui-popover-padding-vertical`, `--nutui-popover-height`, `--nutui-popover-icon-size`, `--nutui-popover-icon-color`, `--nutui-popover-status-max-width`, `--nutui-popover-description-max-width`, `--nutui-popover-action-hotspot-size`.
   - `--nutui-popover-content-background-color` default changed from `#ffffff` to `$color-mask`; `--nutui-popover-text-color` from `$color-mask` to `$color-primary-text`.
   - `--nutui-popover-item-width` default changed from `160px` to `240px` (same as status max width).
+
+### Skeleton
+
+- **`size` visual spec updates (compatible)**:
+  - `large` (title) height changed from `32px` to `28px`; `normal` (price) height from `24px` to `20px`; `small` (paragraph) stays `16px`; border radius stays `4px`.
+  - Size semantics: `small` for paragraph, `normal` for price, `large` for title.
+- **`duration` default changed (breaking default behavior)**:
+  - The shimmer sweep duration default changed from `0.6` (600ms) to `0.4` (400ms). To keep the original pace, pass `duration={0.6}` explicitly.
+- **Background token update**:
+  - `--nutui-skeleton-background` default fallback changed from `$color-background-sunken` to `$color-background`, following the `color-background` token in dark mode automatically.
+- **Shimmer visual redesign**:
+  - The loading shimmer changed from a dark horizontal-translate overlay to a white 30° diagonal light band (80px wide, gradient opacity 0% → 50% → 0%), sweeping left to right over 400ms and looping after a ~1s pause.

src/sites/sites-react/doc/docs/react/migrate-from-v3.md

@@ -104,3 +104,15 @@ npm install @nutui/nutui-react-taro
   - 新增 `--nutui-popover-padding-horizontal`、`--nutui-popover-padding-vertical`、`--nutui-popover-height`、`--nutui-popover-icon-size`、`--nutui-popover-icon-color`、`--nutui-popover-status-max-width`、`--nutui-popover-description-max-width`、`--nutui-popover-action-hotspot-size`。
   - `--nutui-popover-content-background-color` 默认值由 `#ffffff` 改为 `$color-mask`；`--nutui-popover-text-color` 由 `$color-mask` 改为 `$color-primary-text`。
   - `--nutui-popover-item-width` 默认值由 `160px` 改为 `240px`（等同状态型最大宽度）。
+
+### Skeleton (反馈类)
+
+- **`size` 视觉规格对齐设计稿（兼容升级）**：
+  - `large`（标题）高度由 `32px` 调整为 `28px`；`normal`（价格）高度由 `24px` 调整为 `20px`；`small`（正文）保持 `16px`；圆角保持 `4px`。
+  - 尺寸语义映射：`small` 对应正文、`normal` 对应价格、`large` 对应标题。
+- **`duration` 默认值变更（不兼容默认值行为）**：
+  - 光晕移动时长默认值由 `0.6`（600ms）调整为 `0.4`（400ms）。如需维持原有节奏，请显式传入 `duration={0.6}`。
+- **背景色令牌调整**：
+  - `--nutui-skeleton-background` 默认回退值由 `$color-background-sunken` 改为 `$color-background`，暗黑模式下自动跟随 `color-background` 令牌。
+- **光晕视觉重做**：
+  - 加载光晕由横向平移的深色叠加改为白色 30° 斜向光带（宽 80px，渐变透明度 0% → 50% → 0%），由左至右移动 400ms、停顿约 1s 后循环。

src/sites/sites-react/doc/docs/taro/migrate-from-v3.en-US.md

@@ -104,3 +104,15 @@ npm install @nutui/nutui-react-taro
   - Added `--nutui-popover-padding-horizontal`, `--nutui-popover-padding-vertical`, `--nutui-popover-height`, `--nutui-popover-icon-size`, `--nutui-popover-icon-color`, `--nutui-popover-status-max-width`, `--nutui-popover-description-max-width`, `--nutui-popover-action-hotspot-size`.
   - `--nutui-popover-content-background-color` default changed from `#ffffff` to `$color-mask`; `--nutui-popover-text-color` from `$color-mask` to `$color-primary-text`.
   - `--nutui-popover-item-width` default changed from `160px` to `240px` (same as status max width).
+
+### Skeleton
+
+- **`size` visual spec updates (compatible)**:
+  - `large` (title) height changed from `32px` to `28px`; `normal` (price) height from `24px` to `20px`; `small` (paragraph) stays `16px`; border radius stays `4px`.
+  - Size semantics: `small` for paragraph, `normal` for price, `large` for title.
+- **`duration` default changed (breaking default behavior)**:
+  - The shimmer sweep duration default changed from `0.6` (600ms) to `0.4` (400ms). To keep the original pace, pass `duration={0.6}` explicitly.
+- **Background token update**:
+  - `--nutui-skeleton-background` default fallback changed from `$color-background-sunken` to `$color-background`, following the `color-background` token in dark mode automatically.
+- **Shimmer visual redesign**:
+  - The loading shimmer changed from a dark horizontal-translate overlay to a white 30° diagonal light band (80px wide, gradient opacity 0% → 50% → 0%), sweeping left to right over 400ms and looping after a ~1s pause.

src/sites/sites-react/doc/docs/taro/migrate-from-v3.md

@@ -104,3 +104,15 @@ npm install @nutui/nutui-react-taro
   - 新增 `--nutui-popover-padding-horizontal`、`--nutui-popover-padding-vertical`、`--nutui-popover-height`、`--nutui-popover-icon-size`、`--nutui-popover-icon-color`、`--nutui-popover-status-max-width`、`--nutui-popover-description-max-width`、`--nutui-popover-action-hotspot-size`。
   - `--nutui-popover-content-background-color` 默认值由 `#ffffff` 改为 `$color-mask`；`--nutui-popover-text-color` 由 `$color-mask` 改为 `$color-primary-text`。
   - `--nutui-popover-item-width` 默认值由 `160px` 改为 `240px`（等同状态型最大宽度）。
+
+### Skeleton (反馈类)
+
+- **`size` 视觉规格对齐设计稿（兼容升级）**：
+  - `large`（标题）高度由 `32px` 调整为 `28px`；`normal`（价格）高度由 `24px` 调整为 `20px`；`small`（正文）保持 `16px`；圆角保持 `4px`。
+  - 尺寸语义映射：`small` 对应正文、`normal` 对应价格、`large` 对应标题。
+- **`duration` 默认值变更（不兼容默认值行为）**：
+  - 光晕移动时长默认值由 `0.6`（600ms）调整为 `0.4`（400ms）。如需维持原有节奏，请显式传入 `duration={0.6}`。
+- **背景色令牌调整**：
+  - `--nutui-skeleton-background` 默认回退值由 `$color-background-sunken` 改为 `$color-background`，暗黑模式下自动跟随 `color-background` 令牌。
+- **光晕视觉重做**：
+  - 加载光晕由横向平移的深色叠加改为白色 30° 斜向光带（宽 80px，渐变透明度 0% → 50% → 0%），由左至右移动 400ms、停顿约 1s 后循环。

src/styles/variables-daojia.scss

@@ -1534,16 +1534,18 @@ $form-item-tip-text-align: var(--nutui-form-item-tip-text-align, left) !default;
 
 // skeleton（✅）
 $skeleton-background: var(--nutui-skeleton-background,
-    $color-background-sunken) !default;
+    $color-background) !default;
 $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default;
 $skeleton-line-small-height: var(--nutui-skeleton-line-small-height,
     16px) !default;
 $skeleton-line-normal-height: var(--nutui-skeleton-line-normal-height,
-    24px) !default;
+    20px) !default;
 $skeleton-line-large-height: var(--nutui-skeleton-line-large-height,
-    32px) !default;
+    28px) !default;
 $skeleton-line-border-radius: var(--nutui-skeleton-line-border-radius,
     $radius-xs) !default;
+$skeleton-animation-color: var(--nutui-skeleton-animation-color,
+    rgba(255, 255, 255, 0.5)) !default;
 
 // card（✅）
 $card-border-radius: var(--nutui-card-border-radius, 4px) !default;

src/styles/variables-jmapp.scss

@@ -2556,16 +2556,20 @@ $skeleton-line-small-height: var(
 ) !default;
 $skeleton-line-normal-height: var(
   --nutui-skeleton-line-normal-height,
-  24px
+  20px
 ) !default;
 $skeleton-line-large-height: var(
   --nutui-skeleton-line-large-height,
-  32px
+  28px
 ) !default;
 $skeleton-line-border-radius: var(
   --nutui-skeleton-line-border-radius,
   0
 ) !default;
+$skeleton-animation-color: var(
+  --nutui-skeleton-animation-color,
+  rgba(255, 255, 255, 0.5)
+) !default;
 
 // card（✅）
 $card-border-radius: var(--nutui-card-border-radius, 4px) !default;

src/styles/variables-jrkf.scss

@@ -2616,16 +2616,20 @@ $skeleton-line-small-height: var(
 ) !default;
 $skeleton-line-normal-height: var(
   --nutui-skeleton-line-normal-height,
-  24px
+  20px
 ) !default;
 $skeleton-line-large-height: var(
   --nutui-skeleton-line-large-height,
-  32px
+  28px
 ) !default;
 $skeleton-line-border-radius: var(
   --nutui-skeleton-line-border-radius,
   0
 ) !default;
+$skeleton-animation-color: var(
+  --nutui-skeleton-animation-color,
+  rgba(255, 255, 255, 0.5)
+) !default;
 
 // card（✅）
 $card-border-radius: var(--nutui-card-border-radius, 4px) !default;