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とを状態として使用して、2.Xでアニメーションをトリガーしました。 4.Xにアップグレードした後、エラーは発生しませんでしたが、アニメーションが適切にトリガされませんでした。文字列だけに切り替えると、再び機能します。ブーリアンを使用しているように見えるので、私は文字列に切り替えようとします。それはあなたのために再び働き始めるかもしれません。

したがって​​はtrue/falseの代わりに'no'/'yes'になる可能性があります。また、アニメーションのtransitionを0 => 1からno => yesに、またstateの宣言をtriggerに更新する必要があります。

Answer 2

あなたapp.component.tsで再びBrowserAnimationsModuleをインポートする必要はありません。あなたはNgModuleに1度宣言する必要があります。 アップグレードが大丈夫だと思われるので、テンプレートに誤字があります。