@tarojs/plugin-platform-harmony-ets 4.0.0-beta.22 → 4.0.0-beta.23

package/dist/apis/index.ts

@@ -58,27 +58,37 @@ export function initPxTransform ({
 
 const display = _display.getDefaultDisplaySync()
 
+let displayWidth = display.width
+let ratioCache: number | false = false
 let designWidthFunc: (input: number) => number
+let designWidth = defaultDesignWidth
+let deviceRatio = defaultDesignRatio
 function getRatio (value: number) {
-  const config = (Current as any).taro?.config || {}
-  if (!isFunction(designWidthFunc)) {
-    designWidthFunc = isFunction(config.designWidth)
-      ? config.designWidth
-      : () => config.designWidth
-  }
-  const designWidth = designWidthFunc(value) || defaultDesignWidth
-  const deviceRatio = config.deviceRatio || defaultDesignRatio
-  if (!(designWidth in deviceRatio)) {
-    throw new Error(`deviceRatio 配置中不存在 ${designWidth} 的设置！`)
+  // Note: 提前调用 display 可能无法获取正确值
+  if (ratioCache === false || displayWidth !== display.width) {
+    const config = (Current as any).taro?.config || {}
+    if (!isFunction(designWidthFunc)) {
+      designWidthFunc = isFunction(config.designWidth)
+        ? config.designWidth
+        : () => config.designWidth
+      designWidth = designWidthFunc(value) || defaultDesignWidth
+      deviceRatio = config.deviceRatio || defaultDesignRatio
+      if (!(designWidth in deviceRatio)) {
+        throw new Error(`deviceRatio 配置中不存在 ${designWidth} 的设置！`)
+      }
+    }
+    displayWidth = display.width
+    ratioCache = Math.min(display.width, display.height) / designWidth / deviceRatio[designWidth]
   }
-  return Math.min(display.width, display.height) / designWidth / deviceRatio[designWidth]
+
+  return ratioCache
 }
 
 // Note: 设置为 style 单位时会自动完成设计稿转换，设计开发者调用 API 时也许抹平差异，例如 pageScrollTo[option.offsetTop]
 export function pxTransformHelper (size: number, unit?: string, isNumber = false): number | string {
   const config = (Current as any).taro?.config || {}
   const targetUnit = unit || config.targetUnit || defaultTargetUnit
-  
+
   if (targetUnit === 'PX') {
     return px2vp(size * display.scaledDensity) + 'vp'
   }

package/dist/apis/ui/animation/animation.ts

@@ -1,4 +1,5 @@
 import matrix4 from '@ohos.matrix4'
+import { isUndefined } from '@tarojs/shared'
 
 import { temporarilyNotSupport } from '../../utils'
 
@@ -110,7 +111,7 @@ export class Animation implements Taro.Animation {
   }
 
   scale (sx: number, sy?: number | undefined): Taro.Animation {
-    this.rule.scale = { x: sx, y: sy }
+    this.rule.scale = { x: sx, y: isUndefined(sy) ? sx : sy }
     return this
   }
 

package/dist/apis/wxml/IntersectionObserver.ts

@@ -45,7 +45,7 @@ export class IntersectionObserver implements Taro.IntersectionObserver {
 
   public observe (targetSelector: string, callback: Taro.IntersectionObserver.ObserveCallback): void {
     if (!this._component) return
-    
+
     const { observeAll, thresholds } = this._options
     const node = findChildNodeWithDFS(this._component, targetSelector, observeAll)
     this._observerNodes = node
@@ -68,6 +68,10 @@ export class IntersectionObserver implements Taro.IntersectionObserver {
           callback(this.handleResult(isVisible, currentRatio))
         })
       }
+    } else {
+      callback({
+        errMsg: 'IntersectionObserver.observe:fail cannot find the node for selector.'
+      })
     }
   }
 

package/dist/components-harmony-ets/button.ets

@@ -98,6 +98,13 @@ export default struct TaroButton {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroButtonElement) => void = this.customBuilder
   @ObjectLink node: TaroButtonElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node?.hmStyle?.display !== 'none') {
@@ -112,7 +119,7 @@ export default struct TaroButton {
         }
       }
       .themeStyles(getThemeAttributes(this.node))
-      .attributeModifier(commonStyleModify.setNode(this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .constraintSize({
         minWidth: this.node.hmStyle?.minWidth || getButtonMinWidth(this.node),
         minHeight: this.node.hmStyle?.minHeight || getButtonMinHeight(this.node),

package/dist/components-harmony-ets/canvas.ets

@@ -1,12 +1,18 @@
-import type { TaroCanvasElement } from '@tarojs/runtime'
+import type { TaroAny, TaroCanvasElement } from '@tarojs/runtime'
 import { cancelAnimationFrame, requestAnimationFrame } from '@tarojs/runtime'
-
+import commonStyleModify from './style'
 
 @Component
 export default struct TaroCanvas {
   @ObjectLink node: TaroCanvasElement
   rafId: number = 0
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   aboutToDisappear() {
     if(this.rafId) {
@@ -16,9 +22,11 @@ export default struct TaroCanvas {
 
   build() {
     Canvas(this.node._context)
-      .width('100%')
-      .height('100%')
-      .backgroundColor('#ffff00')
+      .attributeModifier(commonStyleModify.setNode(this.node as TaroAny, {
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#ffff00'
+      }).setAnimationStyle(this.overwriteStyle))
       .onReady(() => {
         const context = this.node._context
 

package/dist/components-harmony-ets/checkbox.ets

@@ -38,10 +38,12 @@ export struct TaroCheckbox {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroCheckboxElement) => void = this.customBuilder
   @ObjectLink node: TaroCheckboxElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node && !this.node._isInit) {
       this.node._isInit = true
+      this.node._instance = this
       this.node._reset = this.node.checked || false
     }
   }
@@ -51,7 +53,7 @@ export struct TaroCheckbox {
       Stack() {
         Row() {
           Checkbox(getOptions(this.node))
-            .attributeModifier(commonStyleModify.setNode(this.node))
+            .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
             .checkboxAttr(getAttributes(this.node))
             .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
             .select(this.node.checked)
@@ -99,6 +101,7 @@ export struct TaroCheckboxGroup {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroCheckboxGroupElement) => void = this.customBuilder
   @ObjectLink node: TaroCheckboxGroupElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   @Styles visibleChangeEvent () {
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
@@ -106,6 +109,7 @@ export struct TaroCheckboxGroup {
 
   aboutToAppear () {
     if (this.node) {
+      this.node._instance = this
       // 阻止事件冒泡传递上去
       this.node.addEventListener('change', (e: TaroEvent<ChangeEventDetail>) => {
         e.stopPropagation()
@@ -129,7 +133,7 @@ export struct TaroCheckboxGroup {
         Row() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .defaultEvent()
         .visibleChangeEvent()
         .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
@@ -138,7 +142,7 @@ export struct TaroCheckboxGroup {
         Column() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .defaultEvent()
         .visibleChangeEvent()
         .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)

package/dist/components-harmony-ets/form.ets

@@ -13,13 +13,21 @@ export default struct TaroForm {
   @BuilderParam createLazyChildren: (node: TaroFormElement) => void = this.customBuilder
   @ObjectLink node: TaroFormElement
 
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
   build() {
     if (this.node?.hmStyle?.display !== 'none') {
       if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
         Row() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
         .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
         .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
@@ -32,7 +40,7 @@ export default struct TaroForm {
         Column() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
         .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
         .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {

package/dist/components-harmony-ets/icon.ets

@@ -53,6 +53,13 @@ export default struct TaroIcon {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroIconElement) => void = this.customBuilder
   @ObjectLink node: TaroIconElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node?.hmStyle?.display !== 'none') {
@@ -62,7 +69,7 @@ export default struct TaroIcon {
         .attributeModifier(commonStyleModify.setNode(this.node, {
           width: convertNumber2PX(23),
           height: convertNumber2PX(23)
-        }))
+        }).setAnimationStyle(this.overwriteStyle))
         .size({
           width: convertNumber2VP(Number(this.node._attrs.size) || 23),
           height: convertNumber2VP(Number(this.node._attrs.size) || 23),

package/dist/components-harmony-ets/image.ets

@@ -21,6 +21,13 @@ export default struct TaroImage {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroImageElement) => void = this.customBuilder
   @ObjectLink node: TaroImageElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node?.hmStyle?.display !== 'none') {
@@ -30,7 +37,7 @@ export default struct TaroImage {
           this.node._nodeInfo.areaInfo = res[1]
         }))
         .objectFit(getImageMode(this.node.getAttribute('mode')))
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .onComplete(e => eventHandler(e, 'complete', this.node))
         .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
     }

package/dist/components-harmony-ets/input.ets

@@ -51,6 +51,7 @@ export default struct TaroInput {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroInputElement) => void = this.customBuilder
   @ObjectLink node: TaroInputElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node) {
@@ -72,7 +73,7 @@ export default struct TaroInput {
       .maxLength(Number(this.node._attrs?.maxlength) || null)
       .placeholderColor(getPlaceholderColor(this.node))
       .enterKeyType(INPUT_CONFIRM_MAP.get(this.node._attrs?.confirmType) || EnterKeyType.Done)
-      .attributeModifier(commonStyleModify.setNode(this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .styles(this.node?.hmStyle)
       .attrs(getAttributes(this.node))
       .onChange((value: string) => {

package/dist/components-harmony-ets/label.ets

@@ -39,6 +39,13 @@ export default struct TaroLabel {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node:TaroLabelElement) => void = this.customBuilder
   @ObjectLink node:TaroLabelElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node?.hmStyle?.display !== 'none') {
@@ -46,7 +53,7 @@ export default struct TaroLabel {
         Row() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .onClick((e: ClickEvent) => {
           const firstChild: TaroElement | null = this.node.childNodes[0] as TaroElement | null
           const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
@@ -65,7 +72,7 @@ export default struct TaroLabel {
         Column() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .onClick((e: ClickEvent) => {
           const firstChild: TaroElement | null = this.node.childNodes[0] as TaroElement | null
           const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''

package/dist/components-harmony-ets/movableArea.ets

@@ -1,4 +1,4 @@
-import type { TaroMovableAreaElement, TaroMovableViewElement} from '@tarojs/runtime'
+import type { TaroAny, TaroMovableAreaElement, TaroMovableViewElement } from '@tarojs/runtime'
 import { rowModify, columnModify } from './style'
 
 import { FlexManager } from './utils/flexManager'
@@ -8,6 +8,13 @@ export default struct TaroMovableArea {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroMovableAreaElement) => void = this.customBuilder
   @ObjectLink node: TaroMovableAreaElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node && this.node.hmStyle?.display !== 'none') {
@@ -15,7 +22,7 @@ export default struct TaroMovableArea {
         Row() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(rowModify.setNode(this.node))
+        .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
         .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         .clip(true)
@@ -51,7 +58,7 @@ export default struct TaroMovableArea {
         Column() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(columnModify.setNode(this.node))
+        .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
         .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         .clip(true)

package/dist/components-harmony-ets/movableView.ets

@@ -1,4 +1,4 @@
-import type { TaroMovableViewElement } from '@tarojs/runtime'
+import type { TaroAny, TaroMovableViewElement } from '@tarojs/runtime'
 
 import { rowModify, columnModify } from './style'
 
@@ -9,6 +9,13 @@ export default struct TaroMovableView {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroMovableViewElement) => void = this.customBuilder
   @ObjectLink node: TaroMovableViewElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node && this.node.hmStyle?.display !== 'none') {
@@ -18,14 +25,14 @@ export default struct TaroMovableView {
           Row() {
             this.createLazyChildren(this.node)
           }
-          .attributeModifier(rowModify.setNode(this.node))
+          .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
           .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
           .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         } else {
           Column() {
             this.createLazyChildren(this.node)
           }
-          .attributeModifier(columnModify.setNode(this.node))
+          .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
           .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
           .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         }

package/dist/components-harmony-ets/picker.ets

@@ -7,7 +7,7 @@ import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroAny, TaroEvent } from '@tarojs/runtime'
 
-import { PickerDateProps, PickerMultiSelectorProps, PickerSelectorProps, PickerTimeProps } from './types'
+import { PickerDateProps, PickerMultiSelectorProps, PickerSelectorProps, PickerTimeProps } from '@tarojs/components/types'
 
 interface TimeRange {
   startHH: number

package/dist/components-harmony-ets/progress.ets

@@ -12,6 +12,13 @@ export default struct TaroProgress {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroProgressElement) => void = this.customBuilder
   @ObjectLink node: TaroProgressElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build() {
     if (this.node && this.node.hmStyle?.display !== 'none') {
@@ -20,7 +27,7 @@ export default struct TaroProgress {
           value: parseFloat(this.node.getAttribute('percent')),
           type: ProgressType.Linear
         })
-          .attributeModifier(commonStyleModify.setNode(this.node))
+          .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
           .color(this.node.getAttribute('activeColor') ?? PROGRESS_ACTIVECOLOR)
           .backgroundColor(this.node.getAttribute('backgroundColor') ?? PROGRESS_BACKGROUNDCOLOR)
           .style({

package/dist/components-harmony-ets/radio.ets

@@ -37,10 +37,12 @@ export struct TaroRadio {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroRadioElement) => void = this.customBuilder
   @ObjectLink node: TaroRadioElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node && !this.node._isInit) {
       this.node._isInit = true
+      this.node._instance = this
       this.node._reset = this.node.checked || false
     }
   }
@@ -54,7 +56,7 @@ export struct TaroRadio {
             value: this.node.value || '',
           })
             .checked(this.node.checked)
-            .attributeModifier(commonStyleModify.setNode(this.node))
+            .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
             .radioAttr(getAttributes(this.node))
             .onChange((value: boolean) => {
               if (this.node) {
@@ -99,6 +101,7 @@ export struct TaroRadioGroup {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroRadioGroupElement) => void = this.customBuilder
   @ObjectLink node: TaroRadioGroupElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   @Styles visibleChangeEvent () {
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
@@ -106,6 +109,7 @@ export struct TaroRadioGroup {
 
   aboutToAppear () {
     if (this.node) {
+      this.node._instance = this
       const childList = this.node.getElementsByTagName<TaroRadioElement>('RADIO')
       childList.forEach(element => {
         element.group = this.node?._attrs.name || this.node?._nid
@@ -131,7 +135,7 @@ export struct TaroRadioGroup {
         Row() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .defaultEvent()
         .visibleChangeEvent()
         .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
@@ -140,7 +144,7 @@ export struct TaroRadioGroup {
         Column() {
           this.createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .defaultEvent()
         .visibleChangeEvent()
         .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)

package/dist/components-harmony-ets/scrollView.ets

@@ -62,6 +62,13 @@ export default struct TaroScrollView {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroScrollViewElement) => void = this.customBuilder
   @ObjectLink node: TaroScrollViewElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build () {
     if (this.node.hmStyle?.display !== 'none') {
@@ -74,7 +81,7 @@ export default struct TaroScrollView {
               this.createLazyChildren(this.node)
             }
           }
-          .attributeModifier(rowModify.setNode(this.node))
+          .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
           .width(null)
           .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {
             this.node._nodeInfo._scroll = areaResult
@@ -90,7 +97,7 @@ export default struct TaroScrollView {
               this.createLazyChildren(this.node)
             }
           }
-          .attributeModifier(columnModify.setNode(this.node))
+          .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
           .height(null)
           .alignItems(HorizontalAlign.Start)
           .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {

package/dist/components-harmony-ets/slider.ets

@@ -42,6 +42,7 @@ export default struct TaroSlider {
   @ObjectLink node: TaroSliderElement
 
   @State value: number = 0
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
     if (this.node) {
@@ -64,7 +65,7 @@ export default struct TaroSlider {
       style: SliderStyle.OutSet,
       direction: Axis.Horizontal
     })
-      .attributeModifier(commonStyleModify.setNode(node))
+      .attributeModifier(commonStyleModify.setNode(node).setAnimationStyle(this.overwriteStyle))
       .attrs(getAttributes(node))
       .width(!!node._attrs.showValue ? '90%' : '100%')
       .themeStyles(!!node._attrs.disabled)

package/dist/components-harmony-ets/style.ets

@@ -1,13 +1,20 @@
-import type { HarmonyStyle, TaroElement, TaroStyleType } from '@tarojs/runtime'
-import { isUndefined } from '../shared'
+import type { TaroAny, HarmonyStyle, TaroElement, TaroStyleType } from '@tarojs/runtime'
+import { isUndefined } from '@tarojs/shared'
 import { computeBackgroundPosition } from './utils'
 import { getNormalAttributes } from './utils/helper'
 import { isMaxWidthView } from './utils/styles'
 
 class CommonStyleModify implements AttributeModifier<CommonAttribute> {
+  initStyle?: TaroStyleType
   node: TaroElement | null = null
   style: TaroStyleType | null = null
-  initStyle?: TaroStyleType
+  overwriteStyle: Record<string, TaroAny> = {}
+  
+  setAnimationStyle (overwriteStyle: Record<string, TaroAny>) {
+    this.overwriteStyle = overwriteStyle
+
+    return this
+  }
 
   setNode (node: TaroElement, initStyle?: TaroStyleType) {
     this.node = node
@@ -28,6 +35,8 @@ class CommonStyleModify implements AttributeModifier<CommonAttribute> {
     if (this.node && this.style) {
       setNormalAttributeIntoInstance(instance, this.style, this.node)
     }
+
+    setAnimationAttributeIntoInstance(instance, this.overwriteStyle)
   }
 }
 
@@ -59,6 +68,8 @@ class RowStyleModify extends CommonStyleModify {
         maxHeight: this.style.maxHeight
       })
     }
+
+    setAnimationAttributeIntoInstance(instance, this.overwriteStyle)
   }
 }
 
@@ -73,9 +84,32 @@ class ColumnStyleModify extends CommonStyleModify {
         maxHeight: this.style.maxHeight
       })
     }
+
+    setAnimationAttributeIntoInstance(instance, this.overwriteStyle)
   }
 }
 
+function setAnimationAttributeIntoInstance(instance: CommonAttribute, overwriteStyle: Record<string, TaroAny>) {
+  // Animation 需要提前和 @State 变量绑定才能产生动画效果，因此不能做 if else 判断
+  instance.translate({
+    x: overwriteStyle.translate?.x,
+    y: overwriteStyle.translate?.y,
+    z: overwriteStyle.translate?.z,
+  }).scale({
+    x: overwriteStyle.scale?.x,
+    y: overwriteStyle.scale?.y,
+    z: overwriteStyle.scale?.z,
+    centerX: overwriteStyle.transformOrigin?.x,
+    centerY: overwriteStyle.transformOrigin?.y,
+  }).rotate({
+    x: overwriteStyle.rotate?.x,
+    y: overwriteStyle.rotate?.y,
+    z: overwriteStyle.rotate?.z,
+    centerX: overwriteStyle.transformOrigin?.x,
+    centerY: overwriteStyle.transformOrigin?.y,
+    angle: overwriteStyle.rotate?.angle,
+  })
+}
 
 function setNormalAttributeIntoInstance(instance: CommonAttribute, style: TaroStyleType, node?: TaroElement | null) {
   if (!isUndefined(style.id)) {
@@ -113,7 +147,9 @@ function setNormalAttributeIntoInstance(instance: CommonAttribute, style: TaroSt
   if (node) {
     instance.width(isMaxWidthView(node as TaroElement) && isUndefined(style.width) ? '100%' : style.width)
   } else {
-    instance.width(style.width)
+    if (!isUndefined(style.width)) {
+      instance.width(style.width)
+    }
   }
   if (!isUndefined(style.height)) {
     instance.height(style.height)

package/dist/components-harmony-ets/swiper.ets

@@ -44,13 +44,20 @@ export default struct TaroSwiper {
   @Builder customBuilder() {}
   @BuilderParam createLazyChildren: (node: TaroSwiperElement) => void = this.customBuilder
   @ObjectLink node: TaroSwiperElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
 
   build () {
     if (this.node.hmStyle?.display !== 'none') {
       Swiper(this.node.controller) {
         this.createLazyChildren(this.node)
       }
-        .attributeModifier(commonStyleModify.setNode(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
         .swiperAttr(getSwiperAttributes(this.node))
         .indicatorStyle({
           color: this.node.getAttribute('indicatorColor'),