/\*\*

- @ngdoc directive
- @name ngAnimateSwap
- @restrict A
- @scope
-
- @description
-
- ngAnimateSwap is a animation-oriented directive that allows for the container to
- be removed and entered in whenever the associated expression changes. A
- common usecase for this directive is a rotating banner or slider component which
- contains one image being present at a time. When the active image changes
- then the old image will perform a `leave` animation and the new element
- will be inserted via an `enter` animation.
-
- @animations
- | Animation | Occurs |
- |----------------------------------|--------------------------------------|
- | {@link ng.$animate#enter enter} | when the new element is inserted to the DOM |
- | {@link ng.$animate#leave leave} | when the old element is removed from the DOM |
-
- @example
- <example name="ngAnimateSwap-directive" module="ngAnimateSwapExample"
-          deps="angular-animate.js"
-          animations="true" fixBase="true">
- <file name="index.html">
-     <div class="container" ng-controller="AppCtrl">
-       <div ng-animate-swap="number" class="cell swap-animation" ng-class="colorClass(number)">
-         {{ number }}
-       </div>
-     </div>
- </file>
- <file name="script.js">
-     angular.module('ngAnimateSwapExample', ['ngAnimate'])
-       .controller('AppCtrl', ['$scope', '$interval', function($scope, $interval) {
-         $scope.number = 0;
-         $interval(function() {
-           $scope.number++;
-         }, 1000);
-
-         let colors = ['red','blue','green','yellow','orange'];
-         $scope.colorClass = function(number) {
-           return colors[number % colors.length];
-         };
-       }]);
- </file>
- <file name="animations.css">
- .container {
- height:250px;
- width:250px;
- position:relative;
- overflow:hidden;
- border:2px solid black;
- }
- .container .cell {
- font-size:150px;
- text-align:center;
- line-height:250px;
- position:absolute;
- top:0;
- left:0;
- right:0;
- border-bottom:2px solid black;
- }
- .swap-animation.ng-enter, .swap-animation.ng-leave {
- transition:0.5s linear all;
- }
- .swap-animation.ng-enter {
- top:-250px;
- }
- .swap-animation.ng-enter-active {
- top:0px;
- }
- .swap-animation.ng-leave {
- top:0px;
- }
- .swap-animation.ng-leave-active {
- top:250px;
- }
- .red { background:red; }
- .green { background:green; }
- .blue { background:blue; }
- .yellow { background:yellow; }
- .orange { background:orange; }
- </file>
- </example>
  */
