ngAnimate applying transition style to element causes undesirable behavior

[oste]

I am fading an element in when shown. The issue I am facing is that ngAnimate is adding transition style to the element. This is causing undesirable results because the element is given additional styles after this transition style is applied.

Here is a simple example showing how a small delay in adding height style will cause the height to transition as well. http://plnkr.co/edit/zeyoWWYfLlXcVMM67XiH

If this is the expected behavior how would I prevent the height from animating as well. Once again, the desired result is to only have the element fadeIn and not have the height transition.

Here is the line of code that adds the transition style I am referring to https://github.com/angular/angular.js/blob/master/src/ngAnimate/animate.js#L1915

Thanks!

[matsko]

Hey @oste. ngAnimate does have a feature where you can inline styles with an animation that is triggered via $animate. The problem is that you need to create your own directive.

$animate.removeClass(element, 'ng-hide', {
   from : { ... },
   to : { ... }
});

Having the ability to pass styles directly from the scope via ng-style would be great. It would be super nice if those styles could be automatically piped with any animation that is taking place within the same digest.

Right now there's a refactor going on with $animate: #10067. Once that goes in then we can revisit this to figure out how we can get ngStyle to comfortably work with ngAnimate.

[oste]

Thanks for the information, for now a workaround is to just replace ng-style with something like style="height:{{ height }}px"

[Narretz]

This actually doesn't happen in 1.4.9 anymore. (I don't know when exactly it was fixed)