中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
HarmonyOS 自定义弹窗 @CustomDialog 如何设置从底部升起的动画?
微信扫码分享
@CustomDialog struct CustomDialogExample { controller: CustomDialogController @State showFlag: Visibility = Visibility.Visible; build() { Column() { Button("关闭弹窗") } .width("100%") .height(400) .backgroundColor(Color.Gray) .onClick(() => { this.cancel(); }) .visibility(this.showFlag) //核心代码 设置动画事件为200ms ,设置组件转场时插入的起点和删除的终点为屏幕以下100vp .transition(TransitionEffect.OPACITY.animation({ duration: 200 }).combine(TransitionEffect.translate({ y: 100 }))) } //在删除的时候需要注意,如果弹窗直接关闭是没有转场效果的,可以先用显隐控制, //设置弹窗为隐藏,此时弹出向下退出的动效生效,再设置延时关闭弹窗。 cancel() { this.showFlag = Visibility.Hidden setTimeout(() => { this.controller.close() }, 200) } } @Entry @Component struct CustomDialogUser { dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample(), autoCancel: false, customStyle: true }) build() { Column() { Button('click me').onClick(() => { this.dialogController.open() }) }.width('100%').height('100%') } }