Delay in ng-show hiding elements when condition is false

Question

I'm rather new to AngularJS and am having this issue happening throughout my app. When I use ng-show (or even ng-hide ), when the condition is false, there's a delay in the element hiding. It's a good 1 sec delay.

One instance: So if there is not a subdomain description, the button is meant to hide...immediately.

<button
    class="btn btn-sm btn-primary pull-right animated fadeIn"
    title="Show Domain Info"
    ng-click="hideMe = !hideMe"
    ng-show="vm.subdomainDescription"
>
  <img src="assets/images/icon_info_circle.svg" class="icon-md" alt="Info">
</button>

Any help would be greatly appreciated.

Answer 1

Found the issue. I have a transition on all the buttons like so:

.btn {
  position: relative;
  @extend .gotham-medium;
  border: 0;
  text-transform: uppercase;
  @include transition(background-color $transition-settings);
}

I was also using animate.css classes animated fadeIn . When those classes where removed the problem persisted because I also have the transitions on the button. It was a combination of both. It was a combination of both.

That was the culprit. What a knob I am :)