show/hide transition not triggering properly because of ng-animate

548 Views Asked by At

Angularjs 1.2.6 scenario: 2 inputs, 1 textbox (sounds kinda dirty). The inputs both trigger a show / hide transition on blur / focus events and focus always comes after blur if click from one input to another. Even the text binding shows the proper current state (show = true or false).

<div class="hint fade" ng-class="{in: info.show}">info.text<div>

The style classes .fade and .in come from bootstrap. They have a CSS3 transition but in the fiddle I kept it simple (not including bootstrap.css).

info.show is switched on focus / blur events.

jsfiddle

Without ngAnimate it works perfect. When ngAnimate is added as dependency, transitions stop working properly. In the jsfiddle, simply remove ngAnimate (leaving an empty array) and it works just fine.

Just click on one input: textbox fades in. Now directly click the other input: text updates properly, but box still fades out.

Filed a bug-report, but in the meantime I'm looking for a work-around. Got suggestions?

0

There are 0 best solutions below