ng-show and ng-if lags to hide content

Question

I have the following in to show and hide the clear button based upon if the searchQuery is empty or not. When a user starts typing in the input box, the button shows instantly.

However, when the user either clicks the clear button or deletes all input, there is a noticeable lag before the clear button is removed. I have tried ng-show as well, and have received the same results. Any ideas why this lag might exist?

HTML

<button ng-if="search.cardsQuery.length" class="button-icon" ng-click="clearSearchQuery()">
    <i class="ion-android-close search-cards"></i>
</button>

CONTROLLER

$scope.clearSearchQuery = function() {
    $scope.search.cardsQuery = '';
};

Answer 1

Check the css class on the element you're applying ng-if/ng-show to. Look for the transition effect. If the class has a transition, it may be the cause to the delay:

.button-icon {
    transition: all .5s;
}