search

angular / angular.js

AngularJS - HTML enhanced for web apps!
https://angularjs.org
MIT License
58.85k stars 27.52k forks source link

ngAnimate: Jumps in transition when 'delay' is set with $animateCss, but not set in CSS #13355

Closed ben-reilly closed 8 years ago

ben-reilly commented 8 years ago

Plnkr: http://plnkr.co/edit/DGI0fUHtzQkyIw6CKuJ6?p=preview

When I run a transition using $animateCss with a delay set in the params, the transition will jump suddenly sometimes, especially when delay = duration.

I don't think this is supposed to be happening.

This issue is easily fixed by setting transition-delay in the object's CSS to any value at all (which gets ignored). I am not sure why no-value behaves differently from transition-delay: [any value].

A general workaround for anyone having trouble is to put the following at the top of your CSS:

* {
  transition-delay: 0s;
}

since this is the default value for transition-delay anyway.

Narretz commented 8 years ago

For the record, it doesn't happen in Firefox for me.

Narretz commented 8 years ago

This seems to happen because we ignore the delay value unless it's also set in style, in which case the delay values are recalculated. Ignoring the delay for the fallback timings, that is. They are correctly set in the styles. $animateCss will close the animation automatically after delay + duration + 1.5 seconds, as a last measure. When you have delay / duration at exactly 3 seconds, it'll close the animation in the middle.

Narretz commented 8 years ago

I took the liberty of fixing this - see #13363 P.S. It's just a PR, not yet landed