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后，我没有收到错误，但它不会正确触发动画。切换到只有字符串使它再次工作。由于你似乎在使用布尔值，我会尝试切换到字符串，它可能会再次为你工作。

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

Answer 2

您无需再次导入app.component.ts中的BrowserAnimationsModule。您应该在NgModule中声明一次。您的模板中可能有一些拼写错误，因为您的升级似乎没问题。

Angular4升级动画无法正常工作

2 个答案: