How to change the aurelia-dialog animation?


#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;
  }
}

#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!


#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.