Angular conditional display using ng-if/ng-show/ng-switch briefly shows both elements

Question

I want to show either element A or B based on the value of a boolean, but when the value switches, both elements are shown briefly, using ng-if:

<div ng-if="a"></div>
<div ng-if="!a"></div>

This also happens when I use ng-show/ng-hide:

<div ng-show="a"></div>
<div ng-hide="a"></div>

And even ng-switch:

<div ng-switch="a || 'false'">
   <div ng-switch-default></div>
   <div ng-switch-when="false"></div>
</div>

Is there any way to enforce only one of those elements being shown at the same time, or it this just not possible?

Answer 1

(Late answer for late people like me.)

I'm guessing the project uses ngAnimate that causes these kinds of issues.

This question has several answers, ranging from removing ngAnimate, changing related CSS and switching to using ngClass.

Another question has an answer suggesting to configure animations with $animateProvider.