Angular 2 Slide Up and Down Animation

Question

I recently built the following Angular 2 Read More component. What this component does is collapse and expand long blocks of text with \"Read more\" and \"Read Less\" links.

Answer 1

My Solution with :enter, :leave and *ngIf:

@Component({
    selector: 'accordion',
    templateUrl: './accordion.component.html',
    animations: [
        trigger('slideInOut', [
            state('in', style({height: '*', opacity: 0})),
            transition(':leave', [
                style({height: '*', opacity: 1}),

                group([
                    animate(300, style({height: 0})),
                    animate('200ms ease-in-out', style({'opacity': '0'}))
                ])

            ]),
            transition(':enter', [
                style({height: '0', opacity: 0}),

                group([
                    animate(300, style({height: '*'})),
                    animate('400ms ease-in-out', style({'opacity': '1'}))
                ])

            ])
        ])
    ]
})
...

Template:

    // ...content

Unfortunately I had to incorporate this fix also (for slideOut): https://github.com/angular/angular/issues/15798