Nested animation

Testing out some animation stuff with angular 1.2 and animate.css

by Dejan Vasic

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-app="mainApp" ng-controller="mainCtrl" class="container">
    <ul class="pagination">
        <li><a href="#" ng-click="setNumber(1)">1</a>

        </li>
        <li><a href="#" ng-click="setNumber(2)">2</a>

        </li>
        <li><a href="#" ng-click="setNumber(3)">3</a>

        </li>
    </ul>
    <div class="row">
        <div class="col-md-6">
            <nested ng-show="isNumber(1)"><span class="bouncy" ng-show="isNumber(1)">Animated Text</span> : Page 1</nested>
            <nested ng-show="isNumber(2)"><span class="faded" ng-show="isNumber(2)">Animated Text</span> : Page 2</nested>
            <nested ng-show="isNumber(3)"><span class="bouncy" ng-show="isNumber(3)">Animated Text</span> : Page 3</nested>
        </div>
    </div>
</div>

CSS

/*.bouncy.ng-hide-add {
    -webkit-animation: bounceOut 2s;
    animation: bounceOut 2s;
}*/
 .bouncy.ng-hide-remove {
    -webkit-animation: bounceIn 1s;
    animation: bounceIn 1s;
}
.faded.ng-hide-remove {
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

JavaScript

var main = angular.module('mainApp', ['ngAnimate']);

main.controller('mainCtrl', function ($scope, $animate) {
    var pages = [1, 2, 3];
    $scope.current = 0;
    $scope.isNumber = function (num) {
        return $scope.current === num;
    };
    $scope.setNumber = function (num) {
        $scope.current = num;
    };
});

/*
main.directive('nested', function ($animate) {
    return {
        restrict: 'E',
        link: function (scope, element, attr) {
            //$animate.addClass(element, 'bounceIn');
        }
    };
});*/