可以参考下demo用transition动画去实现// 弹窗交互 @CustomDialog @Component struct CustomDialogExample { controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({}), autoCancel:false }) @State showFlag: Visibility = Visibility.Visible; @State isAutoCancel: boolean = false; build() { Column() { Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 }) .backgroundColor('#FFFFFF') .textAlign(TextAlign.Center) .height(200) .width('100%') .margin({top:600}) .onClick(()=>{ this.cancel(); }) } .width('100%') .height('100%') .margin({ bottom: -15 }) .onClick(()=>{ if(this.isAutoCancel){ this.cancel(); } }) .visibility(this.showFlag) .transition(TransitionEffect.OPACITY.animation({duration: 1000}).combine(TransitionEffect.translate({y: 100}))) } cancel(){ this.showFlag=Visibility.Hidden setTimeout(()=>{ this.controller.close() }, 1000) } } @Entry @Component struct CustomDialogUser { @State isAutoCancel: boolean = false; 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%').margin({ top: 5 }) .onClick(()=>{ }) } }
可以参考下demo用transition动画去实现