Angular 4.3.6 анимации не работают должным образом

После перехода с Angular 4.3.5 на 4.3.6 что-то с анимацией пошло не так (с 4.3.5 все было в порядке).

Проблема в том, что при запуске приложения загружается компонент входа в систему, и этот компонент имеет анимацию fadeIn для отображения. После обновления до последней angular версии мой компонент всегда скрыт после загрузки приложения. Я проверил компонент входа в систему и обнаружил, что к нему применен style="display: none";.

Я использую внешний файл animations.ts для хранения всех своих анимаций.

animations.ts

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

    // Fade In Animation
    export const fadeIn = trigger('fadeIn', [
        transition('void => *', [
            style({ opacity: 0 }),
            animate(500, style({ opacity: 1 }))
        ])
    ]);

login.component.ts

    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';

    import { AuthenticationService } from '../../services/authentication.service';

    import { fadeIn } from './../../shared/animations/animations';

    @Component({
        moduleId: module.id,
        selector: 'app-authentication',
        templateUrl: './authentication.component.html',
        styleUrls: ['./authentication.component.css'],
        animations: [fadeIn]
    })

    export class AuthenticationComponent implements OnInit {

        constructor(private router: Router,
            private authenticationService: AuthenticationService) { }

    ngOnInit() {

    }

login.component.html

    <div class="container" [@fadeIn]>
        <div class="loginContainer">
            <div class="loginHeader">Login</div>
            <form name="loginForm" #loginForm="ngForm" (ngSubmit)="loginForm.form.valid && logIn()" novalidate>
                <div class="loginBody">
                    <span>content</span>
                </div>
            </form>
        </div>
    </div>

Самое странное, что даже если я удаляю [@fadeIn] из html, мой компонент загружается скрытым. Только после того, как я удалю animations: [fadeIn] из login.component.ts, появится моя форма входа, без какой-либо анимации fadeIn.

ПРИМЕЧАНИЕ: я использую [@fadeIn] без каких-либо выражений. Но до версии 4.3.5 она работала просто отлично.

Любые предложения, ребята?

Ответы

Ответ 1

Похоже, что Angular исправляет проблемы с анимацией после версии 4.4.1. Обновление до 4.4.1 должно решить проблему.