5

I have recently upgraded my angular app from angular2.4.0 to angular 4.0.0. I have followed this link It compile without any error, Only 3 warnings it gives. here is attached screenshot of warning.enter image description here But the animation not working. 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 { }
Improve this question

2 Answers 2

Reset to default
2

I recently ran in to a similar issue. And managed to solve it by changing my states - that trigger the animations - to strings.

I was using 0 and 1 as states to trigger the animation in 2.X. After upgrading to 4.X I didn't get errors, but it would not trigger animations 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 again for you.

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

thanks It worked for me too. I changed the states to string and assigned same value as states to them. then it worked.I think it should work with boolean values and states, I don't know why it does not work with boolean values.
I'm glad it helped. I agree that it should work with numbers/booleans. But I was just surprised that they didn't mention this in their upgrade notes.
0

You don't need to import again the BrowserAnimationsModule in your app.component.ts. You should declare it once in your NgModule. You probably have some typo in your template because your upgrade seems okay.

Improve this answer

3 Comments

yeah, but we have commented BrowserAnimationsModule from app.component.ts but still problem remain same
@PravinMishra Hmm, can you show your verification.compontent.html?
the verification.component.html is same as app.component.html while edit I forgot to change templateUrl

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.