Ionic-framework: Angular 4 Animations do not work in an Ionic 3 app

Created on 14 May 2017  路  9Comments  路  Source: ionic-team/ionic-framework

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

  1. 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",

Most helpful comment

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

All 9 comments

@gitdisrupt There are currently numerous bugs and regressions with animations in Angular 4.x. Ionic may turn out to be the source of the problem in the end, but it may be worth investigating whether or not your specific use case is broken in Angular itself. I know that mine are, and I've given up on using animations entirely until they get it together.

@gitdisrupt , as @JustinPierce said above, Angular animations are a work in progress and are known to be buggy. Unfortunately, we do not have any direct control over the Angular animations package. Would you mind checking if you have the same issues in a plain angular app? Thanks!

Hello all, because we are not able to reproduce this issue I am going to close this issue for now. Thanks for using Ionic

This is still an issue. I am using Animate Trigger within ngFor and think this is related to the issue. Same is not a problem in plain angular app
plain angular app -> https://embed.plnkr.co/?show=preview
demo app with issue -> https://github.com/dipikag1989/animation

This is still an issue, seems to work fine when running on the browser with ionic serve but not working on the device with ionic run ios

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

@JustinPierce thanks, that worked!

@JustinPierce I heart you right now!!

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Sturgelose picture Sturgelose  路  83Comments

marcovtwout picture marcovtwout  路  76Comments

abennouna picture abennouna  路  129Comments

pavimus picture pavimus  路  90Comments

zarko-tg picture zarko-tg  路  79Comments