我最近将我的 Angular 应用程序从 angular2.4.0 升级到了 angular 4.0.0。 我已经关注了这个link 它编译没有任何错误,只给出了 3 个警告。 这里附上警告截图。 enter image description here 但是动画不起作用。 请检查我遗漏了什么。 提前致谢。
package.json
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/platform-server": "^4.0.0",
"@angular/router": "^4.0.0",
"angular2-modal": "2.0.2",
"core-js": "2.4.1",
"font-awesome": "4.7.0",
"jquery": "3.2.1",
"ng2-translate": "2.5.0",
"rxjs": "5.2.0",
"typescript": "^2.2.2",
"web-animations-js": "^2.2.2",
"zone.js": "0.7.4"
},
app.component.ts
import { Component } from '@angular/core';
import { Router, ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
import { BaseComponent } from '../base/base.component';
import { ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { trigger, transition, style, animate, state } from '@angular/animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@Component({
selector: 'verification',
templateUrl: 'app.component.html',
providers: [BaseComponent],
animations: [
trigger('trans', [
// What happens when toggleState is true
// state('true' , style({ opacity: 1, transform: 'translateX(0)', offset: 0 })),
state('true', style({ transform: 'translateY(0)' })),
// What happens when toggleState is false
// state('false', style({ opacity: 0, transform: 'translateX(100%)', offset: 0, position:'absolute', right:-9999 })),
state('false', style({ transform: 'translateY(20%)' })),
// transition
transition('0 => 1', animate('0.2s 100ms ease-in')),
transition('1 => 0', animate('0.3s 25ms ease-out'))
])
]
})
export class VerificationComponent {
public verifySuccess:boolean;
constructor(private router: Router, private route: ActivatedRoute, private base: BaseComponent) {
this.verifySuccess = true;
}
}
app.component.html
<div class="clearfix">
<div class="backstretch">
</div>
<div class="vefification">
<div class="verification-content">
<div class="verification-main p-20" [@trans]="verifySuccess">
<div *ngIf="verifySuccess">
<h3>YOU'RE ALL SET</h3>
<div class="form-group">
<button class="btn-resend-email" type="submit" (click)="verifySuccess=true">RESEND EMAIL</button>
</div>
</div>
</div>
</div>
</div>
</div>
app.modulte.ts
import { NgModule } from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [ BrowserModule,
BrowserAnimationsModule,
BootstrapModalModule,
],
declarations: [ //components
VerificationComponent,
] })
export class AppModule { }
最佳答案
我最近遇到了类似的问题。并设法通过将我的状态(触发动画)更改为字符串来解决它。
我使用 0
和 1
作为状态来触发 2.X 中的动画。升级到 4.X 后我没有收到错误,但它不会正确触发动画。切换到仅字符串使其再次工作。由于您似乎在使用 bool 值,我会尝试切换到字符串,它可能会再次为您工作。
因此 this.veryfySuccess
可以是 'no'/'yes'
而不是 true/false
。您还需要将动画中的 transition
从 0 => 1
更新为 no => yes
以及您的 state
触发器
中的声明。
关于Angular4 升级动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43407504/