为什么我的 ng-class 忽略动画？

【问题标题】：Why is my ng-class ignoring the animation?为什么我的 ng-class 忽略动画？
【发布时间】：2015-11-24 18:09:14
【问题描述】：

我正在尝试使用 ng-class 来根据某些条件设置图标的颜色，但是我也有一个类来包装它所在的 div，这会导致它淡入。

由于某种原因，动画被忽略了，只是显示了彩色图标。

    <div class="change-container" >
        <i data-ng-class="{color: 'green'}"></i>
    </div>

.change-container {
    display: inline-block;
    padding: 0 15px 0 15px;
    height: 100px;
    text-align: center;
    -moz-animation: change-widget-fade-in 0.7s ease-in 1;
    -o-animation: change-widget-fade-in 0.7s ease-in 1;
    -webkit-animation: change-widget-fade-in 0.7s ease-in 1;
}

【问题讨论】：

标签： javascript jquery css angularjs animation

【解决方案1】：

您缺少 ng-class 的语法。无法使用ng-class 直接添加样式。 ng-class 的正确语法是

<ANY
  ng-class="expression">
...
</ANY>

表达式为 eval。评估结果可以是字符串表示以空格分隔的类名、数组或类映射名称为布尔值。在地图的情况下，值为真的属性将作为 CSS 类添加到元素。

Documentation

在你的情况下，你首先需要在css中定义一个类，比如

.green-color {
  color: 'green'
}

然后你可以使用添加这个类

<div class="change-container" >
    <i data-ng-class="{'green-color': true}"></i>
</div>

您可以使用布尔表达式代替true 来有条件地添加green-color 类。

【讨论】：