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" ng-controller="Controller">
    <button ng-click="add()">add</button>
    <button ng-click="remove()">remove</button>
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
</div>

CSS

.ng-enter {
    transition: all 0.3s linear;
    font-size: 1.5em;
    opacity: 0;
}

.ng-enter-active {
    font-size: 1em;
    opacity: 1;
}

.ng-leave {
    transition: all 0.3s linear;
    font-size: 1em;
    opacity: 1;
}

.ng-leave-active {
    font-size: 1.5em;
    opacity: 0;
}

JavaScript

angular
.module('myModule', ['ngAnimate'])
.controller('Controller', function($scope) {
    $scope.items = [1, 2, 3, 4];
    
    $scope.add = function() {
        $scope.items.push($scope.items.length + 1);
    };
    
    $scope.remove = function() {
        $scope.items.pop();
    };
});