Angularjs Angular-ngShow/Hide动画仅在ng单击时触发？

我使用的是Angular版本v1.2.20，在使用ng show/hide时，我遇到了一些关于css转换的奇怪之处。出于某种原因，如果我通过

ng click

调用函数来更改scope对象的值，动画效果会很好，但是如果我通过其他方法（比如超时）来更改它，甚至只是在init函数中调用它，元素会显示，但不会发生动画。下面是一个小示例函数，当从ng click调用时，该函数会显示动画，但在其他情况下不会显示动画

showFlash: (msg, type = "success") ->
  @$.flash =
    "message": msg
    "type": type
  @$timeout =>
    @$.hideFlash()
  , 3000

hideFlash: ->
  @$.flash = null

另外，如果你想知道有趣的

@$

语法，我将Angular Classy用作我的控制器

CSS（Scss）

---

Angular使用4个类为ng show/ng hide设置动画：

.ng隐藏添加
.ng隐藏添加活动
.ng隐藏删除
.ng隐藏删除活动

我看不出您在样式表中使用了它们

CSS

.ng-hide-add {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    opacity: 1;
}
.ng-hide-add.ng-hide-add-active { 
    opacity: 0;
}

.ng-hide-remove {
   -webkit-transition:0.5s linear all;
   -moz-transition:0.5s linear all;
   -o-transition:0.5s linear all;
   transition:0.5s linear all;
    opacity: 0;
}
.ng-hide-remove.ng-hide-remove-active { 
    opacity: 1;
}

脚本

var app = angular.module("app", ['ngAnimate']);
app.controller('Ctrl', function($scope, $timeout) {
     $scope.show = false;
     $scope.onShow = function() { 
        $scope.show = true;
        $timeout(function() { 
           hideMe();
        },2000);
     }
     function hideMe() {
        $scope.show = false;
     }
});

---

下面是一个演示如何使用它们的示例。

我希望这是常规的Angular@pixelbits

@$.foo

就是这个的等价物。$scope.foo你在用ng show吗？@pixelbits是的，

ng show=“flash”

在我的div中。我建议您使用Angular为您提供的CSS类来制作动画。看答案。谢谢！我查找了要使用的类，但是文档有点混乱（听起来像是一些类用于中间动画步骤之类的）。现在我了解了它们的工作原理。

var app = angular.module("app", ['ngAnimate']);
app.controller('Ctrl', function($scope, $timeout) {
     $scope.show = false;
     $scope.onShow = function() { 
        $scope.show = true;
        $timeout(function() { 
           hideMe();
        },2000);
     }
     function hideMe() {
        $scope.show = false;
     }
});