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>

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

注意：我使用[@fadeIn]时没有任何表达。但是直到4.3.5版本才能正常工作。

有什么建议吗？

Answer 1

Angular似乎解决了4.4.1版之后的动画问题。

Angular 4.3.6动画无法正常工作

1 个答案: