【问题标题】: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 类。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-05-12
      • 2014-10-05
      • 2016-02-29
      • 2020-11-07
      • 1970-01-01
      • 2012-10-22
      • 2013-09-30
      • 2017-04-16
      相关资源
      最近更新 更多