Docs4dev
Docs
angularjs / 1.6 / api / nganimate / directive / nganimateswap.html

Improve this Doc View Source ngAnimateSwap

  1. directive in module ngAnimate

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

© 2010–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.6.9/docs/api/ngAnimate/directive/ngAnimateSwap