Improve this Doc View Source

## Overview

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.

## Directive Info

- This directive creates new scope.
- This directive executes at priority level 0.

## Usage

- as attribute:

      <ANY
        ng-animate-swap>
      ...
      </ANY>

## Animations

Animation | Occurs
--- | ---
enter | when the new element is inserted to the DOM
leave | when the old element is removed from the DOM

Click here to learn more about the steps involved in the animation.

## Example

    <div class="container" ng-controller="AppCtrl">
      <div ng-animate-swap="number" class="cell swap-animation" ng-class="colorClass(number)">
        {{ number }}
      </div>
    </div>

    angular.module('ngAnimateSwapExample', ['ngAnimate'])
    .controller('AppCtrl', ['$scope', '$interval', function($scope, $interval) {
      $scope.number = 0;
      $interval(function() {
        $scope.number++;
      }, 1000);

      var colors = ['red','blue','green','yellow','orange'];
      $scope.colorClass = function(number) {
        return colors[number % colors.length];
      };
    }]);

    .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; }