CODEWITHSUNDEEP
javascriptjquerycssangularjsanimation
John McElreavey
John McElreavey

Reputation: 307

Why is my ng-class ignoring the animation?

I am trying to use ng-class to set the color of an icon dependent on certain conditions however I also have a class wrapping the div in which it's in that causes it to fade in.

For some reason the animation is being ignored and the icon colored is simply displayed. 

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

Upvotes: 0

Views: 70

Answers (1)

Vivek
Vivek

Reputation: 13228

You are missing the syntax of ng-class . A style can not be added directly by using ng-class. The correct syntax for ng-class is 

<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

In your case, you first need to define a class in css, like

.green-color {
  color: 'green'
}

and then you can add this class using

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

You can use a Boolean expression in place of true to conditionally add the green-color class.

Upvotes: 2

Related Questions