32

从 Angular 4.3.5 迁移到 4.3.6 之后，动画的某些东西变坏了（4.3.5 一切都好）。

问题是，当应用程序启动时，登录组件被加载，并且该组件有fadeIn动画显示。升级到最新的 Angular 版本后，我的组件总是在应用程序加载后隐藏。我检查了登录组件，发现它已style="display: none";应用。

我正在使用外部 animations.ts 文件来存储我的所有动画。

动画.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 }))
    ])
]);

登录组件.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], fromlogin.component.ts之后，我的登录表单才会出现，只是没有任何fadeIn动画。

注意：我使用[@fadeIn]没有任何表达式。但直到 4.3.5 版本它工作得很好。

有什么建议吗？

4

1 回答 1

1

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

于 2017-09-18T07:03:05.727 回答