Применение эффектов анимации для эффектов анимации angular2

Question

Я пытаюсь применить анимацию к md-карте (пытается реплицировать https://teradata.github.io/covalent/#/components/expansion-panel) ... Я могу получить представление и применить анимацию, но переход при расширении карты/collapsed является гладким, которого я не могу получить. Я сделал демо здесь http://plnkr.co/edit/kvzSSbseT5cbOv054i2u?p=preview, где переход между состояниями является fast.I пытаюсь реализовать один и тот же вид анимации, когда моя карта в демо щелкают ...

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')) 
    ]) 
] 

Эти анимации я пытаясь применить. Может кто-нибудь, пожалуйста, помогите мне в получении такого эффекта анимации, который находится в вышеуказанной ссылке?

Answer 1

Я просто смотрел этот урок на youtube. Это дает хорошую основу для управления анимацией ...

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