为什么我的ng类忽略了动画

Why is my ng-class ignoring the animation?

本文关键字：动画 我的 ng 为什么      更新时间：2023-09-26

我试图使用ng类根据特定条件设置图标的颜色，但我也有一个类包装它所在的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;
}

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

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

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

文档

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

.green-color {
  color: 'green'
}

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

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

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

相关文章：