HarmonyOS 鸿蒙Next CustomDialog 入场和出场动画

参考如下demo设置自定义弹窗的自定义动画，思路就是让自定义弹窗占满整个页面然后让里面的内容来添加转场动画，然后这个demo就是底部弹出底部收起的。

let anmDuration: number = 1000;

// 弹窗交互
[@CustomDialog](/user/CustomDialog)
struct CustomDialogExample {
 controller: CustomDialogController =
   new CustomDialogController({ builder: CustomDialogExample({}), autoCancel: false })
 [@State](/user/State) showFlag: Visibility = Visibility.Visible;
 [@State](/user/State) isAutoCancel: boolean = false;
 textController: TextAreaController = new TextAreaController()

 build() {
   Column() {
     Row() {
       Text("自定义动画的弹窗")
     }
     .padding(8)
     .backgroundColor('#FFFFFF')
     .height(200)
     .margin({ bottom: -5 })
     .width('100%')
   }
   .justifyContent(FlexAlign.End)
   .width('100%')
   .height("100%")
   .onClick(() => {
     console.log("dialogClick")
     if (this.isAutoCancel) {
       console.log("dialogClick2")
       this.cancel();
     }
   })
   .visibility(this.showFlag)
   .transition(TransitionEffect.OPACITY.animation({ duration: anmDuration })
     .combine(TransitionEffect.translate({ y: 100 })))
 }

 cancel() {
   this.showFlag = Visibility.Hidden
   console.log("closeDialog")
   setTimeout(() => {
     this.controller.close()
   }, anmDuration)
 }
}

[@Entry](/user/Entry)
[@Component](/user/Component)
struct CustomDialogUser {
 [@State](/user/State) isAutoCancel: boolean = true;
 dialogController: CustomDialogController = new CustomDialogController({
   builder: CustomDialogExample({ isAutoCancel: this.isAutoCancel }),
   autoCancel: this.isAutoCancel,
   customStyle: true
 })

 build() {
   Column() {
     Button('click me').onClick(() => {
       this.dialogController.open()
     })
   }.width('100%').height('100%')
 }
}