Angular4 升级动画不起作用

Question

我最近将我的 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 { }

Answer 1

我最近遇到了类似的问题。并设法通过将我的状态(触发动画)更改为字符串来解决它。

我使用 0 和 1 作为状态来触发 2.X 中的动画。升级到 4.X 后我没有收到错误，但它不会正确触发动画。切换到仅字符串使其再次工作。由于您似乎在使用 bool 值，我会尝试切换到字符串，它可能会再次为您工作。

因此 this.veryfySuccess 可以是 'no'/'yes' 而不是 true/false。您还需要将动画中的 transition 从 0 => 1 更新为 no => yes 以及您的 state 触发器中的声明。