1.2.0-rc2: ngShow translateX animation

[geofflamrock]

Having some issues with ngShow animations in 1.2rc2 when using a translateX() animation moving an element from off to on the screen, where the animation is not being run at all, instead the element is just shown straight away.

Plunkr: http://plnkr.co/edit/b86o7WSU8w3sBnXebQQi?p=preview

Issue only appears to happen using Chrome stable 29.0.1547.66 m, have tested Firefox and IE and seem ok.

I think it might be the following lines in ngAnimate/animate that are causing the issue:

//temporarily disable the transition so that the enter styles
//don't animate twice (this is here to avoid a bug in Chrome/FF).
node.style[w3cTransitionProp + propertyKey] = 'none';
node.style[vendorTransitionProp + propertyKey] = 'none';

although not sure if it's something I've done wrong. If I comment these lines out the animation runs.

Was working in rc1 ok.

Thanks :)

[ithailevi]

Not sure if it's related but I'm getting a regression from rc1 when using ng-click with ngTouch. Transform3d on X used to work good but now flickers. When disabling ngTouch (or fastclick) everything works again. Reverted back to angular-animate 1.2.0rc1.

[btford]

I would expect this to work when animating onto the screen as well, so I think this is a legit regression. @L3V3L9, I suspect this is related.

@matsko, is there some documentation on the bug these offending lines are supposed to fix?

I tried translateY, and noticed that it has the same problem. rotateX and scaleX seem to work fine, but it'd be good to exhaustively test the different transforms.

At very least, it seems like translateX and translateY should be exempt from this "fix."

[btford]

@L3V3L9 Can you try this version of angular-animate.js, which includes my fix, and see if your issue persists http://ci.angularjs.org/job/angular.js-brian/41/artifact/build/angular-animate.js

[btford]

ping @matsko -- can you look at this?

[geofflamrock]

@btford Tried the updated version and still seeing the issue, is the check on propertyKey correct here? As far as I can see propertyKey will always equal 'Property' and therefore will never contain 'translate'?

I wonder if could use transitionTime > 0 as a check instead?

if (transitionTime > 0) {
    node.style[w3cTransitionProp + propertyKey] = 'none';
    node.style[vendorTransitionProp + propertyKey] = 'none';
}

[matsko]

@geofflamrock @btford this actually has more to do with the .ng-hide class being present on the element before the animation takes place rendering it as hidden. When the first CSS class is added, you yourself set display:block, but the animation itself doesn't pickup on the change fast enough to apply the translate styles.

The solution to this is to change how ng-hide works. Instead of the class being removed AFTER the animation is done, it should be removed first before the animation even starts. This way you don't need to override the display property for each hide animation and this would also make your translate code work as expected.

[matsko]

@geofflamrock I tried all three solutions and I find that checking the transition time is the best approach. Awesome work! :)