Angular 5 – Animation not working

Issue

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:
enter image description here

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.

Answered By – Teddy Sterne

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.