How to animate the dialog box?

Question

I'm just trying to add animation to my dialog box, so when the user clicks the show button, the Dialog should appear at the top using the animation. I tried using the animation property in the component metadata, but it does not seem to work. A simple example of what I want is the following:

Animation example

Any ideas on how to make this animation work? Thank you very much in advance!

Here is my code:

Plunker

app.component.ts

animations: [ trigger('slide-dialog', [ state('inactive', style({ transform: 'translate3d(10%, 0%, 0)' })), state('active', style({ transform: 'translate3d(30%,20,0)' })), transition('active => inactive', animate('400ms ease')) ]) 

app.template.html

 <p-dialog [@slide-dialog]="alertstate" header="Title" [(visible)]="display" width = '450' height = '200' [positionLeft]='positionLeft' [positionTop]='positionTop'> Content </p-dialog> 

Answer 1

Try replacing [@slide-dialog]="alertstate" with [@slide-dialog]="display ? 'active' : 'inactive'" .

In addition, if you want the animation to be applied when a modality appears, replace

 transition('active => inactive', animate('400ms ease')) 

 transition('inactive => active', animate('400ms ease')) 

---

Edit

To go down the slide, add this to your CSS:

 .ui-dialog { top: inherit !important; } 

and your states should look something like this:

  state('inactive', style({ position: 'absolute', top: '0px' })), state('active', style({ position: 'absolute', top: '150px' })), 

See working plunker