Angular4 upgrade animation not working

Question

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 { }

Answer 1

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.