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

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

by opengl_8080

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="visible" /> show-hide</label>
    <h1 ng-show="visible">
        Visible
    </h1>
</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']);