以编程方式更改 ng Show 不使用 ngAnimate 类答案

【问题标题】：Programatically changing ngShow doesn't make use of ngAnimate classes以编程方式更改 ng Show 不使用 ngAnimate 类
【发布时间】：2015-06-23 22:15:57
【问题描述】：

我正在尝试通过我的控制器触发 ngShow，它可以工作，但它没有使用我需要获得淡入淡出过渡的 ngAnimate 类。

如果我使用一个按钮来切换 ngShow，它的工作方式就像它应该的那样，但如果我以编程方式切换它，它就不会。这是预期的行为吗？我可以绕过它吗？

普朗克： http://plnkr.co/edit/swJDP1KBBxcRfK9auYPs?p=preview

  <body ng-controller="MainCtrl">
    <input type="checkbox" ng-model="visible">
    <div ng-show="visible" class="wrap" role="document">
      Hello
    </div>
  </body>

var app = angular.module( "app", ['ngAnimate']);

app.run(function($rootScope) {
  $rootScope.visible = false;
});

app.controller('MainCtrl', function($rootScope, $scope) {
  $rootScope.visible = true;
});

.wrap.ng-hide-add-active {
  display: block!important;
  transition: 0.5s ease-in-out all;
}

.wrap.ng-hide-remove-active {
  display: block!important;
  transition: 0.5s ease-in-out all;
  transition-delay: 0.5s;
}

.wrap.ng-hide {
  opacity: 0;
}

【问题讨论】：

标签： angularjs ng-animate ng-show angularjs-ng-show

【解决方案1】：

您正在运行块和控制器代码可能会在同一个摘要周期中执行，因此 Angular 不会看到 visible 变量发生变化。如果您将控制器代码置于超时状态，这将起作用。例如

app.controller('MainCtrl', function($rootScope, $scope, $timeout) {
  $timeout(function() {
    $rootScope.visible = true;
  });
});

http://plnkr.co/edit/5IhGE3ol5kI64OlT1e8v?p=preview

【讨论】：

我注意到它也适用于超时。不过感觉有点hacky。这个问题没有其他解决方案吗？
我不知道。我进行了快速搜索，但只找到了相同的答案：stackoverflow.com/a/20505571/373655