Angular 5 - Animation not working

Question

I have an animation that's supposed to slide in and slide out when I switch between components, but it's not working. So when you switch from component the one you see right now should slide to the left, while the one you want to load comes sliding from the right.

Excuse my terrible drawing but I hope this makes more sense:

This is my code:

checklist.component.ts

import {Component, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
import {animate, style, transition, trigger} from "@angular/animations";

@Component({
    selector: 'app-checklist',
    templateUrl: './checklist.component.html',
    styleUrls: ['./checklist.component.scss'],
    encapsulation: ViewEncapsulation.None,
    animations: [
        trigger('animation', [
            transition('void => *', [
                style({transform: 'translateX(-100%)'}),
                animate(1000)
            ]),
            transition('* => void', [
                animate(1000,
                    style({transform: 'translateX(100%)'}))
            ]),
        ])
    ]
})
export class ChecklistComponent implements OnInit {

    @Input() page = 'main';

    @ViewChild('modalElement') modalElement;

    constructor() {
    }

    ngOnInit() {
    }

    onPage(page: string): void {
        this.page = page;
    }
}

checklist.component.html

<ng-template #modalElement let-c="close" let-d="dismiss">
    <div class="modal-container">
        <div class="modal-header">
            <h4 class="modal-title">{{ 'Checklist'| translate }}</h4>
            <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body" id="modal-body">
            <app-checklist-main *ngIf="page == 'main'" [@animation] (page)="onPage($event)"></app-checklist-main>
            <app-checklist-view *ngIf="page == 'view'" [@animation]></app-checklist-view>
            <app-checklist-mutate *ngIf="page == 'mutate'" [@animation]></app-checklist-mutate>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" (click)="c('Close click')">{{ 'Close'| translate }}</button>
            <button type="button" class="btn btn-primary" (click)="onConfirm($event)">{{ 'Confirm'| translate }}
            </button>
        </div>
    </div>
</ng-template>

Anyone got any idea why it's not working??

EDIT:

Example: https://stackblitz.com/edit/angular-enethh

Solution

I have found that animations do not fire correctly on component tags that are not displayed as block. Update your template to the following and you should see your animations run:

<div class="modal-body" id="modal-body">
  <app-checklist-main style="display: block" *ngIf="page == 'main'" [@animation] (page)="onPage($event)"></app-checklist-main>
  <app-checklist-view style="display: block" *ngIf="page == 'view'" [@animation]></app-checklist-view>
  <app-checklist-mutate style="display: block" *ngIf="page == 'mutate'" [@animation]></app-checklist-mutate>
</div>

This is because the component is displayed as inline by default and according to the Spec animations do not run on those elements.

Comments

[orimdominic]

What if the element according to the design spec has alternate between display: flex and display: none; is there any hack?

[Teddy Sterne]

@sudo_kaizen I think the hack would be to have the element do display: none as an *ngIf and then the first tag inside the element should have display: flex

[orimdominic]

@TeddySterne I'll try that. Thanks