angularjs - ng-show 和 ng-if 滞后于隐藏内容

Question

我有以下内容来根据 searchQuery 是否为空来显示和隐藏清除按钮。当用户开始在输入框中键入内容时，该按钮会立即显示。

但是，当用户单击清除按钮或删除所有输入时，在删除清除按钮之前会出现明显的延迟。我也尝试过 ng-show ，并收到了相同的结果。有什么想法可能存在这种滞后吗？

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

检查您要应用 ng-if/ng-show 的元素上的 css 类。寻找transition effect 。如果类有转换，则可能是延迟的原因:

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