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

ngShow のアニメーションサンプル。

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="myMoudule">
     <label>
       <input type="checkbox" ng-model="visible" />show-hide</label>
       <h1 ng-show="visible">
       visible
       
       </h1>
     </label>
</div>

CSS

.ng-hide-add {
    transition: all 1.0s linear;
    display: block!important;
    opacity: 1;
}

.ng-hide-add-active {
    opacity: 0;
}

.ng-hide-remove {
    transition: all 1.0s linear;
    display: block!important;
    opacity: 0;
}

.ng-hide-remove-active {
    opacity: 1;
}

JavaScript

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