[ngAnimate] timing issues with 1.2.0-rc1

[mgcrea]

I'm encountering glitches in my animation post 1.2.0-rc1.

For short transitions (~300ms), the timeout appears to be called too soon hence breaking the animation. Increasing the duration in ngAnimate (hardcoded) fixes the bumping, it indicates that classes are removed too soon, before the animation is actually finished.

Looks like using css transition/animation events would fix this, what was the reasoning behind parsing > css-events?

See: http://embed.plnkr.co/8UrtBtMee9mE88o1qMwh/preview

[mgcrea]

You can either fix this by adding final transform to your base object (thanks @gsklee):

https://twitter.com/gsklee/status/368590351126106112

Or use a custom ngAnimate service leveraging CSS events:

https://github.com/mgcrea/angular-touch-nav/blob/master/src/services/animateDecorator.js#L84

[matsko]

@mgcrea this is a known bug and it's close to being ready. Here's the working code: #3587 (comment)

[jbdeboer]

It looks like this bug has been fixed (see #3587). Please reopen it if you are still seeing problems.

[matsko]

Thank you @jbdeboer for closing it :)

[mgcrea]

Still having the issue on the latest master. It has improved a bit but it looks like the timing is still not perfect.
This is visible with a simple slide animation with short timings (easier to detect on large 1080p screens) :

.animation-slide {
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  &.ng-enter {
    -webkit-transform: translate3d(100%, 0, 0);
    &.ng-enter-active {
      -webkit-transform: translate3d(0, 0, 0);
    }
  }
  &.ng-leave {
    -webkit-transform: translate3d(0, 0, 0);
    &.ng-leave-active {
      -webkit-transform: translate3d(-100%, 0, 0);
    }
  }
}

I've updated angular-touch-nav to work with angular master:

https://github.com/mgcrea/angular-touch-nav/blob/edge/src/scripts/services/animateDecorator.js#L94

[mgcrea]

Looks like only team members can reopen issues.

[matsko]

This might be that the timeout clock works absolutely while the transition timeout doesn't. So the browser may take a few more seconds to boot up an animation, but the $timeout is always going to be the same amount of time. Maybe it's time to switch over to use the DOM animation events. Lets revisit this once the ngClass PR is put into place (this removes some extra timeouts and fixes the problem with the enter/leave animations not firing).

[matsko]

Hey @mgcrea could you test this PR as well with the same build as the other issue:
https://s3.amazonaws.com/angularjs-dev/enter-leave-animate-bug/angular.js
https://s3.amazonaws.com/angularjs-dev/enter-leave-animate-bug/angular-animate.js

[gunn]

I definitely still see bumping for the ngView and ngInclude examples at http://plnkr.co/edit/H5aiJz3xT6XbVbdwbdnQ?p=preview

[matsko]

The bumping is just how the elements are rendered. A leave event happens at the same time as the enter (with maybe a few MS in between). If a float or inline-block is placed or absolute positioning is used the bumb is avoided. He's just trying to prove that ngClass is executed before the enter animation is stared.

[mgcrea]

@matsko there is definitely bumping like @gunn said, I don't think he was referring to how the elements are rendered but how one element will often bounce back at the end of its animation. I've set up absolute positioning to make the bug more apparent. It will only be visible sometimes on large screens (> 1500px wide), quite easily catchable if you click on the fullscreen button on a 1080p display.

CSS animations won't ever perfectly match your calculated timeout.
You either have to add an extra margin to fill the delay (that would depend on device perf).
Or you can use CSS events to sync things (https://github.com/mgcrea/angular-touch-nav/blob/edge/src/scripts/services/animateDecorator.js#L94)

[matsko]

@mgcrea I see what you mean. I think that all the CSS class adding and removing back and forth causes extra overhead on the browser causing the timeout to be off. I'll look into replacing timeout with events.

[matsko]

@mgcrea I've got the go-ahead to change the timing system to rely on transitionend. This will be fun :)

[mgcrea]

@matsko that's great news! I'm really looking forward to bring the best animations possible for mobile devices with AngularJS, you can ping me if you want any help.

[matsko]

@mgcrea you'll be able to cut down on your decorator code once this goes in: #3882

Please test it out if you can! :)