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

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" class="hoge">Hoge</h1>
    <h1 ng-show="visible" class="fuga">Fuga</h1>
</div>

CSS

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

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

.fuga {
    position: relative;
}
.fuga.ng-hide-add {
    left: 0px;
}
.fuga.ng-hide-add-active {
    left: -100px;
}
.fuga.ng-hide-remove {
    left: -100px;
}
.fuga.ng-hide-remove-active {
    left: 0px;
}

JavaScript

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