Angular 4.3.6动画无法正常工作

Question

从Angular 4.3.5迁移到4.3.6之后动画的东西变坏了(4.3.5就是一切都好).

问题是,当应用程序启动时,会加载登录组件,并且该组件fadeIn会显示动画.升级到最新的角度版本后,我的组件在加载应用程序后总是隐藏.我检查了登录组件,发现它已经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版本它工作得很好.

有什么建议吗？

Answer 1

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