Angular4升级动画无法正常工作

我最近将角度应用程序从angular2.4.0升级到角度4.0.0.
我跟着这个 link
它编译没有任何错误,它只给出3个警告.
这是附表warning. 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 { }