Animations: works only on some elements

Question

I'm developing an .NET Core Angular 4 app generated with this framework. I want to add some router animations and to do than I followed this tutorial.

In general it seems to work but the animation is triggered only for some elements. As an example, I have this view:

<h1>Courses</h1>

<p>This is a simple example of an Angular 2 component.</p>

<p>Current count: <strong>{{ currentCount }}</strong></p>

<button (click)="incrementCounter()">Increment</button>

And its controller class is:

import { Component } from '@angular/core';
import { fadeInAnimation } from '../../animations';

@Component({
    selector: 'courses',
    templateUrl: './courses.component.html',
    animations: [fadeInAnimation],
    host: { '[@fadeInAnimation]': '' }
})
export class CoursesComponent {
    public currentCount = 0;

    public incrementCounter() {
        this.currentCount++;
    }
}

In the same way as shown in the tutorial I've added a file containing the animation:

import { trigger, state, animate, transition, style } from '@angular/animations';

export const fadeInAnimation =
    trigger('fadeInAnimation', [
        // route 'enter' transition
        transition(':enter', [

            // styles at start of transition
            style({ opacity: 0 }),

            // animation and styles at end of transition
            animate('.3s', style({ opacity: 1 }))
        ]),
    ]);

With these code, no errors are shown but the animation is triggered (and visibile) only on the "increment" button element of the view. h1 and p elements are shown istantly.

The only thing that differs from the tutorial code is, maybe, the routing. My routing is:

const routes: Routes = [
    {
        path: "",
        component: ContainerComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: "",
                redirectTo: "courses",
                pathMatch: "full"
            },
            {
                path: "courses",
                component: CoursesComponent
                /*resolve: { home: HomeResolver }*/
            },
            {
                path: 'subscriptions',
                component: SubscriptionsComponent,
                canActivate: [AdminGuard]
            },
            {
                path: 'registry',
                component: RegistryComponent,
                canActivate: [AdminGuard]
            },
            {
                path: 'settings',
                component: SettingsComponent,
                canActivate: [AdminGuard]
            },
            {
                path: "**",
                component: PageNotFoundComponent
            }
        ]
    }
];

The ContainerComponent has, for now, an empty controller with this template:

<header>
    <nav-menu></nav-menu>
</header>
<main>
    <div class="container body-content">
        <router-outlet></router-outlet>
    </div>
</main>
<footer>
    <p>&copy; 2017 - CaliUP</p>
</footer>

What am I missing? Why the animation works only on button and not on other elements?

Thank you all in advance :)

Answer 1

I've tried that exact tutorial and failed to get fade-in-out working, but did get slide-in-out working. However I had a work around for the fade-in-out animation.

export const fadeInAnimation = 
     trigger('fadeInAnimation', [

        state('void', style({ position: 'absolute', width: '100%', height: '100%', opacity: 0 })),
        state('*', style({ position: 'absolute', width: '100%', height: '100%', opacity: 1 })),

        transition(':enter', [
            style({ transform: 'translateY(20%)', opacity: 0 }),
            animate('0.8s ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 }))
        ]),

        transition(':leave', [
            style({ transform: 'translateY(0%)' }),
            animate('0.8s ease-in-out', style({ transform: 'translateY(-20%)', opacity: 0 }))
        ])

    ]);

Hope this helps even though it's a late answer!