AngulaJS アニメーションサンプル３

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<div ng-app="myModule">
    <label><input type="checkbox" ng-model="red" />Red</label>
    <label><input type="checkbox" ng-model="big" />Big</label>
    
    <h1 ng-class="{'red': red, 'big': big}">ngClass</h1>
</div>

CSS

.red {
    color: blue;
}
.big {
    font-size: 15em;
}

.red-add {
    transition: all 0.5s linear;
}
.red-remove {
    transition: all 0.5s linear;
}

.big-add {
    transition: all 0.5s linear;
}
.big-remove {
    transition: all 0.5s linear;
}

JavaScript

angular.module('myModule', ['ngAnimate']);