Question

我正在尝试使用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;
}

Answer 1

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

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

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

<强> Documentation

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

.green-color {
  color: 'green'
}

然后您可以使用

添加此类

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

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

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

1 个答案: