CSS animation sometimes is not played


Hey there,

first of all I’m pretty new to Ionic and Angular ~1 month of experience, but I liked what I’ve seen so far.

I built a very simple app. All what that app does is, it displays an image and when you swipe left or right it does an animated zoom+move on that image.

Now to my problem: When testing in Chrome (ionic serve, Windows), sometimes the animation does not work (about 1-2 times out of 20 swipes). When that happens you can see about 1-2 frames of the animation, then the animation freezes and after a short period of time it jumps to the end frame of the animation. When testing please be sure to wait until the animation stopped until you swipe again. The error won’t show up when swiping during an ongoing animation.

Here is a codepen: http://codepen.io/anon/pen/pJewNb

How the code works: I built a directive that inserts the HTML code that displays the image in the website and that catches the swipe events. Then there are four animation classes defined in CSS ‘scene1’, ‘scene2…4’. The ‘onSwipe’ event handler of the directive then applies those scene classes to the generated HTML code via the ng-class attribute (the handler rotates through scene1-4).

I hope someone can help me with that.