HarmonyOS 平移动画问题？

Question

代码如下：

@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')
  }
}

Answer 1

加上

.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