Angular 4 Animations do not work in an Ionic 3 app

Ionic version: (check one with “x”) [ X] 3.x

I’m submitting a … [X ] bug report

Current behavior: Animations do not work when adding a component to the DOM (to a page, via *ngIf).

Expected behavior: In my example, i have a progress bar that once added to my page should animate from a width of 100% to 0 over 6 seconds. This does not work.

Related code: In my example below i have a progressbar component that is added to my page via *ngIf. I implemented animations exactly in the way that Angular instructs here: https://angular.io/docs/ts/latest/guide/animations.html#!#example-entering-and-leaving

in my app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
imports: [
    BrowserAnimationsModule

I have a progress bar component, here is the relevant part of the template:

<div class="progress-bar" [@animateProgress]>

Here is the relevant part of the progress bar’s component.ts file:

import { trigger, state, style, transition, animate } from '@angular/animations';
...
@Component({
  selector: 'progressbar',
  templateUrl: 'progressbar.html',
  animations: [
  trigger('animateProgress', [
    state('in', style({width: '100%'})),
    transition('void => *', [
      style({width: '100%'}),
      animate(6000, style({width: '0%'}))
    ])
  ])
  ]

in my page, i am adding the progress bar component via a boolean gets set to true via a button’s (click) event using *ngIf to add the progress bar. The progress bar appears as expected at a starting width of 100% but the transition NEVER fires:

<progressbar *ngIf="showProgress"></progressbar>
...
<button (click)="onShowProgress()"></button>
...
public showProgress:boolean = false;
onShowProgress() {
this.showProgress = true;
}

I have experimented with writing and setting actual states by their names, i.e. 'in' for a starting state and 'done' as an ending state and then specifying those states in the transition like this 'in => done' instead of using 'void => *' as the transition, but that does not work either. In that case, the states are set as expected, but the transition does NOT work.

My takeaway is that: 1. Using the “void” state as instructed by Angular, does NOT work in Ionic 3 2. Transitions do NOT work in Ionic 3

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.0.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.0.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.0.0
    @ionic/cli-plugin-ionic-angular : 1.0.0
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.9.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3 Build version 8W120l 
    ios-deploy : 1.9.1 
    ios-sim    : 5.0.13 

here is the relevant part of my package.json file for reference:

"dependencies": {
    "@angular/animations": "^4.1.2",
    "@angular/common": "^4.1.2",
    "@angular/compiler": "^4.1.2",
    "@angular/compiler-cli": "^4.1.2",
    "@angular/core": "^4.1.2",
    "@angular/forms": "^4.1.2",
    "@angular/http": "^4.1.2",
    "@angular/platform-browser": "^4.1.2",
    "@angular/platform-browser-dynamic": "^4.1.2",
    "@ionic-native/core": "^3.8.0",'

and then ionic ...
"ionic-angular": "^3.2.1",

[JustinPierce]

@benydc iOS does not natively support Angular’s animation system. You need to polyfill animation support with the web-animations-js package on npm.

[benydc]

@JustinPierce thanks, that worked!