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

Question

对于一个div，我有一个这样的ng-class表达式：ng-class="{error: msg.isError}"
还有这样ng-show的表达方式：ng-show="msg.text"
很明显，我希望div 在 msg.text 不为空时显示，并且我希望它在 msg.error 为 true 时具有类"错误"。
另外，我希望它在要显示时淡入。当类不更改时，它运行良好，但是当我将msg.error设置为 true 并同时为 msg.text 设置值时，动画不会发生。
这是我问题的JS小提琴。
这是 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类将同时更新类，动画不会发生;

您可以添加计时器，使用$timeout延迟1毫秒，示例：JS小提琴

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为真时，角度将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小提琴

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