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

Answer 1

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.

Answer 2

1. Your transitions have placeholders :

    'void => *' => ':enter'
    '* => void' => ':leave'
   

2. You don't have states in your animations. If you don't have states, you can't use transitions.

3. You can remove the braces of your animation attributes :

     [@animation] => @animation
   

4. You current "animation" is just a change of style

5. I will use opacity instead of transform so that you can see the animation, because with your animation and without knowing your page layout, I'm not sure you will see it otherwise.

6. I will use a cubic bezier function because I like it.

So here is a correct animation :

trigger('animation', [
  state('void', style({ opacity: 0, })),
  state('*', style({ opacity: 1, })),
  transition(':enter', animate(`1000ms ease-out`)),
  transition(':leave', animate(`1000ms ease-in`))
])

Now you can test that, and replace opacity and get rid of the cubic bezier function (if you want to).