Question

当我点击一个元素时，我想要先淡出另一个元素，然后设置为display：none。

我有以下代码：

部分：

<div class="main_menu_image" ng-class="{ fadeOut : MenuOpen==true }" /></div>

<div class="button" ng-click="ActivateMenu()"></div>

然后在我的控制器中：

  $scope.MenuOpen = false;

  $scope.ActivateMenu = function(){
    $scope.MenuOpen = $scope.MenuOpen === false ? true: false;
  }

因此，当我单击按钮时，元素main_menu_image将获取类fadeOut。所以它现在消失了。但是在淡入淡出的动画完成之后，我还想在main_menu_image上将display设置为none，这样就完全隐藏了。

我不想诉诸jQuery。是否有Angular批准的方式这样做？

Answer 1

是的，这很容易:) 与Svein说的一样，您可以使用ng-show，并且可以使用ng-hide。

这会立即隐藏事物。但是你可以通过$timeout服务设置超时，并以这种方式设置隐藏布尔值。

你也可以使用ng-if，如果条件不满足，这实际上会从DOM中删除元素，而不是仅仅设置display：none。

更新： Here's a more proper fiddle showcasing what you're trying to do

Answer 2

您可以使用ngShow。如果使用ngAnimate模块，您将内置支持大多数内置Angular指令的动画。