Angular 4.3.6 动画无法正常工作

Question

从 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>

最奇怪的是，即使我从 HTML 中删除 [@fadeIn]，我的组件也会隐藏加载。只有在我从 login.component.ts 中删除 animations: [fadeIn] 之后，我的登录表单才会出现，只是没有任何 fadeIn 动画.

注意:我使用的 [@fadeIn] 没有任何表达式。但在 4.3.5 版本之前它工作得很好。

有什么建议吗？

Answer 1

Angular 似乎修复了 4.4.1 版之后的动画问题。更新到 4.4.1 应该可以解决这个问题。