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

Question

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

    <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>

Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

Documentation

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

.green-color {
  color: 'green'
}

然后你可以使用

添加这个类

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

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