AngularJS Animations (ng-enter, ng-leave, fade, slide) in a ng-repeat div

app.css

.fade {
    transition:0.5s linear all;
}
.fade.ng-enter-stagger,
.fade.ng-leave-stagger {
    transiton-delay:0.1s;
    transition-duration:0s;
}
.fade.ng-enter {
    opacity:0;
}
.fade.ng-enter.ng-enter-active {
    opacity:1;
}
.fade.ng-leave {
    opacity:1;
}
.fade.ng-leave.ng-leave-active {
    opacity:0;
}
.slide-from-left {
    position:relative;
}
.slide-from-left.ng-enter {
    left:-50px;
}
.slide-from-left.ng-enter.ng-enter-active {
    left:0px;
}
.slide-from-left.ng-leave {
    left:0px;
}
.slide-from-left.ng-leave.ng-leave-active {
    left:-50px;
}

app.js

angular.module('app', ['ngRoute', 'ngAnimate'])

.config(...

index.html

...
<script type="text/javascript" src="https://code.angularjs.org/1.2.6/angular-animate.min.js"></script>
...

view.html

<input type="text" class="searcher" placeholder="Filter Stations" ng-model="search" />
<div class="container row">

  <div class="six columns">
    <h1>Line</h1>
    <div ng-repeat="station in lineStations | filter:search" class="fade slide-from-left">
      <h2>
        <a ng-href="#!/stations/{{ station.id }}">{{ station.title }}</a>
      </h2>
    </div>
  </div>
</div>