Angular4升級動畫無法正常工作

Question

我最近將角度應用從angular2.4.0升級到了角度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 { } 

Answer 1

我最近遇到類似的問題。並設法通過將我的狀態 - 觸發動畫 - 改爲字符串來解決它。

我使用0和1作爲狀態來觸發2.X中的動畫。升級到4.X後，我沒有收到錯誤，但它不會正確觸發動畫。切換到只有字符串使它再次工作。既然你似乎在使用布爾值，我會嘗試切換到字符串，它可能會重新開始爲你工作。因此​​可能是'no'/'yes'而不是true/false。您還需要將動畫中的transition從0 => 1更新爲no => yes以及trigger內的state聲明。

Answer 2

你並不需要在您的app.component.ts再次導入BrowserAnimationsModule。您應該在NgModule中聲明一次。 您的模板中可能有一些錯字，因爲升級看起來沒問題。