CODEWITHSUNDEEP
javascriptangulartypescriptanimation
HenryDev
HenryDev

Reputation: 4973

How to animate a Dialog window?

I'm simply trying to add some animation to my dialog window, so when user clicks on the show button the Dialog should come from the top using an animation. I tried using the animation property on the component metadata but it doesn't seem to work. A simple example of what I want is this:

Example Animation

Any ideas on how to get this animation working? Thanks a lot in advance!

Here's 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>

Upvotes: 4

Views: 2072

Answers (1)

Antikhippe
Antikhippe

Reputation: 6675

Try to replace [@slide-dialog]="alertstate" by [@slide-dialog]="display ? 'active' : 'inactive'".

Also, if you want the animation to apply when modal appears, replace

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

by 

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

Edit

For a slide down transition, add this to your CSS :

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

and your states should look something like :

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

See working Plunker

Upvotes: 1

Related Questions