Question

对于div，我有ng-class这样的表达式：ng-class="{error: msg.isError}"
和ng-show这样的表达式：ng-show="msg.text"
很明显，我希望在msg.text不为空时显示div，并且当msg.error为真时我希望它有类“错误”。
此外，我希望它随着时间的推移而淡出。当类没有改变时它很好用，但当我将msg.error设置为true，同时为msg.text设置一个值时，动画不会发生。
这是我问题的JS fiddle 这是html：

<div ng-app='app' ng-controller='cnt'>
<button ng-click="showText2()">This works</button>
<button ng-click="showText()">This doesn't work</button>
<button ng-click="clear()">Clear</button>
  <div ng-show="msg.text" ng-class="{error: msg.isError}" class="fadein fadeout">{{ msg.text }}</div>
</div>

这是js代码：

app = angular.module('app',['ngAnimate']);
app.controller('cnt', function($scope){
    $scope.showMsg = false;
    $scope.msg = {
        isError: false,
        text: ""
    };
    $scope.clear = function(){
        $scope.msg.isError = false;
        $scope.msg.text = "";
    }        
    $scope.showText = function(){ // This doesn't work
        $scope.msg.isError = true;
        $scope.msg.text = "text to fade in";
    }
    $scope.showText2 = function(){ // This works
        $scope.msg.text = "text to fade in";
    }
});

Answer 1

因为$scope.apply()在同一时间。

当$scope.msg.text不为空时，ng-show应用它，它没关系。如果$scope.msg.isError发生变化，ng-class将同时更新类，动画不会发生;

您可以添加计时器，使用$ timeout delay 1 ms，例如：JS fiddle

app = angular.module('app',['ngAnimate']);
app.controller('cnt', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.showMsg = false;
    $scope.msg = {
        isError: false,
        text: ""
    };
    $scope.clear = function(){
        $scope.msg.isError = false;
        $scope.msg.text = "";
    }        
    $scope.showText = function(){ // This doesn't work        
        $scope.msg.text = "text to fade in";

        // add timer, it's work now
        $timeout(function() {            
            $scope.msg.isError = true;
        }, 1);
    }
    $scope.showText2 = function(){ // This works
        $scope.msg.text = "text to fade in";
    }

}]);

Answer 2

回答太晚了，但仍然，

当ng-show为真时，angular会将ngHide类添加到元素中。因此，如果$scope.msg.isError为真，error类将与ngHide同时添加，因此动画将无效。

以下是简单的解决方法

<div ng-app='app' ng-controller='cnt'>
    <button ng-click="showText2()">This works</button>
    <button ng-click="showText()">This doesn't work</button>
    <button ng-click="clear()">Clear</button>
      <div ng-show="msg.text" class="fadein fadeout">
        <span ng-class="{error: msg.isError}">{{ msg.text }}</span>
      </div>
    </div>

以下是JS Fiddle

这只是一种解决方法而不是真正的解决方案，因为这可能是角度代码本身的一个问题。

使用ng-class更改类时，ng-show动画不起作用

2 个答案: