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

【问题标题】：ng-show animation doesn't work when class is changed with ng-class使用 ng-class 更改类时，ng-show 动画不起作用
【发布时间】：2014-08-11 16:30:12
【问题描述】：

对于一个 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";
    }
});

【问题讨论】：

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

【解决方案1】：

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

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

你可以添加定时器，使用$timeout延迟1毫秒，例如：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";
    }

}]);

【讨论】：

非常感谢。您的解决方案有效。但是，我没有完全得到你的解释。我会暂时搁置这个问题，以寻求其他人的更多解释。

【解决方案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 Fiddle

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

【讨论】：