Angular语言 - ngShow/Hide动画只在ng-click时触发

Question

我使用的是Angular v1.2.20版本，在使用ng-show/hide时，我遇到了一些关于css过渡的奇怪问题。出于某种原因，如果我通过ng-click调用函数来改变作用域对象的值，动画会正常工作，但如果我通过其他方法改变它，比如超时，甚至只是在init函数中调用它，元素会显示，但没有动画发生。下面是一个小的示例函数，当从ng-click调用时，它会显示动画，否则不会。

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

p。S -如果你想知道有趣的@$语法，我使用Angular Classy作为我的控制器。

CSS (Scss)

.dashboard-flash-message {
  @include transition ( all 300ms ease-in-out );
  @include transform( translateY(0) );
  background: $primary;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  opacity: 1;
  padding: 20px;
  position: absolute; bottom: 0; left: 0;
  width: $dashboard-sidebar-width;
  &.ng-hide {
    @include transform( translateY(100%) );
    opacity: 0;
  }
}

Answer 1

Angular使用了4个类来为ng-show/ng-hide添加动画:

。ng-hide-add
.ng-hide-add-active
.ng-hide-remove
.ng-hide-remove-active

我没有看到你在你的样式表中使用它们。

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;
     }
});

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