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
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",
@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.
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 onnpm
.