ng-animate transition problem using zurb foundation 5

[Chris81T]

Hi,
since angular version 1.2.17 I have a big animation problem that some operations are totally slowly. For instance some button components are using ng-show and are set to false, but the button is seen for a few Milli seconds.

Now I have found out, that ngAnimate is executing some css3 transitions from foundation5 html5 framework.

Here a live example:

http://plnkr.co/edit/uPtFwvamczzJFvz2dGmn

Thanks

[Narretz]

It looks like this might be a side-effect introduced by 55b2f0e, see the discussion in #8224

[Chris81T]

Hi Narretz,
thanks for information. I will read the discussion soon.

@matsko
You are actually the assignee of this issue. Can you give some information, if this ( and when ) will be fixed?

Thanks a lot!

Cheers

[matsko]

@Chris81T ngAnimate does still have some issues when dealing with 3rd party CSS code and frameworks (like zurb). The problem is that frameworks usually place defaults across many className selectors (or elements) to make their code small and reuseable. In this case, Zurb placed a transition duration of 300ms across all buttons. This means that Angular will read that millisecond value each time ngAnimate triggers an animation and it will wait for 450 ms (300 * 1.5) to fully close it. That's why everything is "slow" for you.

If only the DOM and CSS were smarter then we could get around this automatically, but we can't. The only sure-fire way is to place this in your angular config.

myApp.config(function($animateProvider) {
   $animateProvider.classNamePrefix(/animate-/);
});

Then for all of YOUR animations, ensure that there is a selector that has a prefix of animate-.

So something like this would work:

<style>
.animate-fade { opacity: 1; transition: 1s linear all; }
.animate-fade.ng-hide { opacity:0; }
</style>

<!-- animated -->
<button class="animate-fade" ng-show="!item.toggled" ng-click="toggle()">Select</button>

<!-- unaffected -->
<button ng-show="!item.toggled" ng-click="toggle()">Select</button>

Closing this for now since there is no solid workaround. Hopefully there will be more DOM functions to detect inherited CSS code better.

[Chris81T]

@matsko Thank you for the workaround with the classNamePrefix. That is okay for me at the moment. Possibly it would be nice to give in the chapter of ngAnimate documentation a note about using third party html5 frameworks ( including with this example ). Personally I'm a big fan of Angular. But I can imagine, that possibly some angular beginners ( but zurb foundation experts or so ) will be disappointed about angular's animation, when they wont know this...

Cheers!

[matsko]

Excellent idea. I've created an assigned an issue to myself for it: #8569

[Chris81T]

👍