0

I am trying to apply animations to the md-card(trying to replicate the https://teradata.github.io/covalent/#/components/expansion-panel) ...I am able to get the view and apply the animations but the transition when a card is expanded/collapsed is smooth which i'm not able to get. I have made a demo here http://plnkr.co/edit/kvzSSbseT5cbOv054i2u?p=preview where the transition between states is fast.I am trying to implement the same kind of animation when my card in the demo is clicked...

animations: [
    trigger('animationState', [
        state('active', style({ height: '*' })),
        state('inactive', style({ height: '0px', display: 'none' })),
        transition('inactive => active', animate('150ms ease-out')),
        transition('active => inactive', animate('150ms ease-out'))
    ])
]

These are the animations i'm trying to apply. can somebody please help me in getting such of animation effect which is in the above link?

br.julien
  • 3,420
  • 2
  • 23
  • 44
abhilash reddy
  • 1,546
  • 8
  • 31
  • 53

1 Answers1

0

I just watched this tutorial on youtube. It gives a good foundation in animation controls...

https://coursetro.com/posts/code/25/Understanding-Angular-2-Animations-Tutorial

John Baird
  • 2,606
  • 1
  • 14
  • 33