从 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 版本之前它工作得很好。
有什么建议吗?
最佳答案
Angular 似乎修复了 4.4.1 版之后的动画问题。更新到 4.4.1 应该可以解决这个问题。
关于Angular 4.3.6 动画无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45937096/