AngularJS ngRepeat Transition staggering example.

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>AngularJS Staggering animations</title>
  <link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <div ng-controller="staggeredCtrl as stagger">
    <h1>ngRepeat Transition staggering example</h1>
    <button ng-click="showEmailsTransitions = !showEmailsTransitions">Show/Hide email list</button>
    <button ng-click="stagger.archive()">Archive AngularJS emails</button>
    <label for="filterBy">Filter email by:</label>
    <input ng-model="stagger.filterBy" name="filterBy" />
    <div ng-repeat="item in stagger.emails | filter:stagger.filterBy" ng-if="showEmailsTransitions" class="repeatItemTransition bg-primary">
      {{item}}
    </div>
    <h1>ngRepeat Animation staggering example</h1>
    <button ng-click="showEmails = !showEmails">Show/Hide email list</button>
    <button ng-click="stagger.archive()">Archive AngularJS emails</button>
    <label for="animationFilterBy">Filter items by:</label>
    <input ng-model="stagger.animationFilterBy" name="animationFilterBy" />
    <div ng-repeat="item in stagger.emails | filter:stagger.animationFilterBy" ng-if="showEmails" class="repeatItem bg-primary">
      {{item}}
    </div>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

function staggeredCtrlFn() {
    var stagger = this;
    stagger.emails = ["AngularJS news", "AngularJS rocks!", "AngularJS animations", "Packet Publishing news", "AngularJS Jobs"];
    stagger.archive = archiveFn;

    function archiveFn() {
        stagger.emails = ["Packet Publishing news"];
    }
}
angular.module('myApp', ['ngAnimate'])
    .controller('staggeredCtrl', staggeredCtrlFn);

/* ngRepeat animation*/
.repeatItemTransition.ng-enter,
.repeatItemTransition.ng-leave {
    -webkit-transition: opacity ease-in-out 1s;
    -moz-transition: opacity ease-in-out 1s;
    -ms-transition: opacity ease-in-out 1s;
    -o-transition: opacity ease-in-out 1s;
    transition: opacity ease-in-out 1s;
}

    .repeatItemTransition.ng-enter,
    .repeatItemTransition.ng-leave.ng-leave-active {
        opacity: 0;
    }

        .repeatItemTransition.ng-leave,
        .repeatItemTransition.ng-enter.ng-enter-active {
            opacity: 1;
        }


.repeatItemTransition.ng-enter-stagger,
.repeatItemTransition.ng-leave-stagger {
    /* This is the delay between each animation of the staggered animation sequence */
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
    /* This should be set to 0s to avoid problems, this element could inherit the value from the repeatItemTransition element */
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}


.repeatItem.ng-enter-stagger,
.repeatItem.ng-leave-stagger,
.repeatItem.ng-move-stagger {
    /* This is the delay between each animation of the staggered animation sequence, now for keyframes animations */
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
    /* This should be set to 0s to avoid problems too, this element could inherit the value from the repeatItem element */
    -webkit-animation-duration: 0;
    -moz-animation-duration: 0;
    -o-animation-duration: 0;
    animation-duration: 0;
}
/* ngRepeat ng-enter animation */
.repeatItem.ng-enter {
    -webkit-animation: 1s ng-enter-repeat-animation;
    -moz-animation: 1s ng-enter-repeat-animation;
    -ms-animation: 1s ng-enter-repeat-animation;
    -o-animation: 1s ng-enter-repeat-animation;
    animation: 1s ng-enter-repeat-animation;
}

@-webkit-keyframes ng-enter-repeat-animation {
    from {
        opacity: 0;
        color: red;
    }

    to {
        opacity: 1;
        color: black;
    }
}

@-moz-keyframes ng-enter-repeat-animation {
    from {
        opacity: 0;
        color: red;
    }

    to {
        opacity: 1;
        color: black;
    }
}

@-ms-keyframes ng-enter-repeat-animation {
    from {
        opacity: 0;
        color: red;
    }

    to {
        opacity: 1;
        color: black;
    }
}

@-o-keyframes ng-enter-repeat-animation {
    from {
        opacity: 0;
        color: red;
    }

    to {
        opacity: 1;
        color: black;
    }
}

@keyframes ng-enter-repeat-animation {
    from {
        opacity: 0;
        color: red;
    }

    to {
        opacity: 1;
        color: black;
    }
}