HarmonyOS 平移动画问题

代码如下:

@Entry
@Component
struct TranslateAnimatePage {
  @State isPresent: boolean = false;
  private tagList: string[] = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii"];
  private showFilterHeight: number = 400;
  private duration: number = 1500;

  build() {
    Column() {
      Row()
        .width("100%")
        .height(200)
        .backgroundColor('#ED5151')
        .onClick(() => {
          this.isPresent = !this.isPresent;
        });

      Stack({ alignContent: Alignment.Top }) {
        Row() {
          Text('周三五折即将开始')
            .fontColor('#ED5151')
            .borderColor('#ED5151')
            .height(24)
            .fontSize(12)
            .borderWidth(0.7)
            .padding({ left: 10, right: 10 })
            .borderRadius(4);

          Blank()
            .layoutWeight(1);

          Text('分类')
            .fontColor('#ED5151')
            .height(24)
            .fontSize(12)
            .padding({ left: 10, right: 10 })
            .onClick(() => {
              this.isPresent = !this.isPresent;
            });
        }.padding({ top: 6, left: 15, bottom: 6 })
        .backgroundColor(Color.White);
        if (this.isPresent) {
          Stack({ alignContent: Alignment.Top }) {
            List() {
              ForEach(this.tagList, (item: string) => {
                ListItem() {
                  Text(item)
                    .fontSize(14)
                    .fontColor('#ED5151')
                    .height(36)
                    .width('100%')
                    .textAlign(TextAlign.Center)
                    .borderRadius(14)
                    .padding({ left: 10, right: 10 });
                }
              }, (item: string) => {
                return item;
              })
            }
            .height(this.showFilterHeight)
            .width('100%')
            .backgroundColor('#F5F5F5')
            .borderRadius({ bottomLeft: 8, bottomRight: 8 })
            .transition(TransitionEffect.translate({ y: -this.showFilterHeight })
              .animation({ duration: this.duration }));
          }
          .height('100%')
          .width('100%')
          .backgroundColor("#7F202020")
          .transition(TransitionEffect.opacity(0.5).animation({ duration: this.duration }))
          .margin({
            top: 36
          });
        }
      }
    }.height('100%')
    .width('100%')
    .backgroundColor('#F5F5F5')
  }
}
HarmonyOS
18h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

加上

.clip(true)

if (this.isPresent) {
  Stack({ alignContent: Alignment.Top }) {
  }
  .clip(true)

对组件进行裁剪、遮罩处理:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5#示例1

分享
微博
QQ
微信
回复
16h前
相关问题
HarmonyOS 平移动画
66浏览 • 1回复 待解决
Tabs组件选中下划线需要平移动
1744浏览 • 1回复 待解决
HarmonyOS 移动上XComponent注册问题
450浏览 • 1回复 待解决
HarmonyOS LongPressGesture手势移动问题
527浏览 • 1回复 待解决
HarmonyOS 组件旋转后,平移方向出错
72浏览 • 1回复 待解决
HarmonyOS 缩放动画问题
54浏览 • 1回复 待解决
HarmonyOS 动画使用问题
31浏览 • 1回复 待解决
HarmonyOS Grid拖拽动画问题
72浏览 • 1回复 待解决
HarmonyOS PAG动画使用问题
29浏览 • 1回复 待解决
HarmonyOS Naviagtion动画问题咨询
35浏览 • 1回复 待解决
HarmonyOS 路径动画相关问题
674浏览 • 1回复 待解决
HarmonyOS 动画执行时机问题
277浏览 • 1回复 待解决
关于属性动画问题
10133浏览 • 3回复 待解决
HarmonyOS list编辑移动效果
259浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人