如何在ng-show显示之前添加延迟/显示元素

Question

有 -

<div ng-show="show"></div>
<button ng-click="show = !show">SHOW</button>

我怎样才能使受show更改影响的显示/显示之前有1秒的延迟？

任何css，Angular，ngAnimate答案都是可以接受的。

Answer 1

没有内联代码。在这种情况下使用函数。

在控制器中注入$timeout。

$scope.toggleDisplay = function () {
    $timeout(function () {
        $scope.show = !$scope.show;
    }, 1000);
};

您的模板将如下所示：

<div data-ng-show="show"></div>
<button data-ng-click="toggleDisplay()">SHOW</button>