Animations not fully working as expected (or my expectations are wrong)


Hi i have a little problem with my animations.

What i want is a pretty simpel thing, a div with a span that has 100% width, and counts down to 0%, and then the next slide is shown.

@Component({ selector: 'page-home', templateUrl: 'home.html', animations: [ trigger('fade', [ state('in', style({ opacity: 1 })), state('out', style({ opacity: 0 })), transition('* => in, void => in', animate('500ms linear')), transition('* => out, void => out', style({opacity: 0})) ]), trigger('slideindicator', [ state('full', style({ width: '100%' })), state('empty', style({ width: '0%' })), transition('full => empty', animate('5000ms linear')), transition('empty => full', style({width: '100%'})) ]) ] }) Somehow it works only once (first slide), it doesn’t go back to 100% width. So the next slide there is no countdown.

I tried animate(‘1ms linear’) instead of style({width: ‘100%’}) but no luck either, i think the problem is that the state full is fired right before empty.

Anyone with suggestions to fix this problem?


i had a fully functional animation until ionic.rc4… but since rc4 my animation only works once.

i think it is related to angular version 2.2.1. In rc3 angular version was 2.1.1 and lot of changes been made to animations between these versions.
angular version in ionic hasn’t been changed from rc4 to rc6 and my problem persisted.
maybe this was a bug and solved in future version of angular but we cant see that until ionic updates its angular version.

this may or may not related to your issue but you might want to try it with ionic rc3.


Hi thanks for your feedback, i will try to go back to Ionic RC3 as well as the final (just found out it was released yesterday). The other animations (fade in/out) work just fine btw.

I did found out that the state doesn’t change somehow:

That function is only called once, so it seems the state isn’t changing somehow, so i don’t know if it’s really a animation that’s not working or a state that doesn’t change…


ok then it is something else.
ionic made many changes to the zones and change detection. try to wrap your code in the zone.
like this: => {
//do the change here
dont forget to import ngZone


Thanks i didn’t know of that function, but i didn’t get it to work (i did got the zone to work, but the changes where still not as expected), but created a workaround, each slide has it’s own indicator and that works great!

Other question, every slide should have a different time to be shown, you know if its possible that we change: animate(‘5000ms linear’) from within the code?