我想要上下平移的动画，从下方插入元素，从上方移出元素，但是元素为什么总是从左右方进入和移出？

@Entry
@Component
struct SlideAnimationDemo {
  @State isVisible: boolean = true;

  build() {
    Column() {
      if (this.isVisible) {
        // 关键点：使用translate设置Y轴偏移
        Text('滑动元素')
          .width('100%')
          .height(100)
          .backgroundColor(Color.Blue)
          .translate({ y: this.isVisible ? 0 : 1000 }) // 初始位置下方（Y轴正方向）
          .position({ x: '0%', y: '100%' }) // 从父容器底部开始
      }
    }
    .height('100%') // 父容器必须设置固定高度
    .onClick(() => {
      // 动画触发
      animateTo({
        duration: 1000,
        curve: Curve.EaseOut
      }, () => {
        this.isVisible = !this.isVisible;
      });
    })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

@Entry
@Component
struct AbsolutePositionAnimation {
  @State offsetY: number = 1000; // 初始在屏幕外（下方）

  build() {
    Stack() {
      Text('上下滑动元素')
        .width('90%')
        .height(100)
        .backgroundColor(Color.Red)
        .position({ y: this.offsetY }) // 通过Y轴绝对定位
        .zIndex(1) // 确保层级

      Button('触发动画')
        .onClick(() => {
          animateTo({
            duration: 500,
            curve: Curve.Friction
          }, () => {
            this.offsetY = this.offsetY === 0 ? 1000 : 0; // 切换Y轴位置
          });
        })
    }
    .height('100%') // 必须设置父容器高度
    .clip(false) // 关闭裁剪，允许元素移出父容器
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.