Angular4 animation does not work

Question

I recently updated my angular app from angular2.4.0 to angular 4.0.0. I followed this link. It compiles without errors, only 3 warnings that it gives. here is a screenshot of the warning. enter a description of the image here. But the animation does not work. Please check what I am missing. Thanks in advance.

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

I recently encountered a similar problem. And I was able to solve this problem by changing my states that trigger the animation into lines.

I used 0 and 1 as states to run animations in 2.X. After upgrading to 4.X, I did not get errors, but that would not cause the animation to work properly. Switching to only strings made it work again. Since you seem to be using booleans, I would try switching to strings, and it might start working for you again.

So this.veryfySuccess could be 'no'/'yes' instead of true/false . You will also need to update your transition in the animation from 0 => 1 to no => yes , as well as your state declarations in trigger .

Answer 2

You do not need to import the BrowserAnimationsModule again into your app.component.ts. You must declare it once in your NgModule . You probably have a typo in the template because your update looks fine.