How to change the aurelia-dialog animation?

Help Requests
1

Suppose I want my Aurelia Dialog to slide down from the top of the browser page? What is the proper way to change the dialog’s animation?

Thanks!

2

If you’re using aurelia-animator-css, make sure you add the au-animate class to ux-dialog:

<ux-dialog class="au-animate">

Then add your css animation to ux-dialog.au-animate.au-enter-active (this example fades in and starts zoomed a bit, but you can do anything you like):

ux-dialog.au-animate.au-enter-active {
  animation: dialogEntry 0.25s;
}

@keyframes dialogEntry {
  0% {
    transform: scale(1.2) opacity: 0;
  }
  100% {
    transform: scale(1) opacity: 1;
  }
}
1 Like
3

Thanks jeffgrann, I’m trying your suggestion but the dialog is continuing to do the default fadein animation. Are there any particular options one has to pass into the DialogService.open method? Do you happen to have a gist or some other working example of what you gave above?

Thanks!

1 Like
4

There is nothing to pass into DialogService.open. I do not have a simple example. Check to be sure you added the au-animate class to your ux-dialog element.

1 Like
5

Managed to solve this with selector : .ux-dialog-open .au-animate However as I see both my animation and old animation with fade-in are executed. Is there a nice way to disable old animation?

2 Likes
6

any update on this? also looking for a way to disable the built in aurelia fading

7

I discovered dialogController.settings.ignoreTransitions = true;
but now how do I animate dialog close?