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.
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?