\n *
\n * \n * {{ number }}\n *
\n * \n * Fade me in out\n *
\n * \n * \n * ```\n *\n * Notice the CSS class **fade**? We can now create the CSS transition code that references this class:\n *\n * ```css\n * /* The starting CSS styles for the enter animation */\n * .fade.ng-enter {\n * transition:0.5s linear all;\n * opacity:0;\n * }\n *\n * /* The finishing CSS styles for the enter animation */\n * .fade.ng-enter.ng-enter-active {\n * opacity:1;\n * }\n * ```\n *\n * The key thing to remember here is that, depending on the animation event (which each of the directives above trigger depending on what's going on) two\n * generated CSS classes will be applied to the element; in the example above we have `.ng-enter` and `.ng-enter-active`. For CSS transitions, the transition\n * code **must** be defined within the starting CSS class (in this case `.ng-enter`). The destination class is what the transition will animate towards.\n *\n * If for example we wanted to create animations for `leave` and `move` (ngRepeat triggers move) then we can do so using the same CSS naming conventions:\n *\n * ```css\n * /* now the element will fade out before it is removed from the DOM */\n * .fade.ng-leave {\n * transition:0.5s linear all;\n * opacity:1;\n * }\n * .fade.ng-leave.ng-leave-active {\n * opacity:0;\n * }\n * ```\n *\n * We can also make use of **CSS Keyframes** by referencing the keyframe animation within the starting CSS class:\n *\n * ```css\n * /* there is no need to define anything inside of the destination\n * CSS class since the keyframe will take charge of the animation */\n * .fade.ng-leave {\n * animation: my_fade_animation 0.5s linear;\n * -webkit-animation: my_fade_animation 0.5s linear;\n * }\n *\n * @keyframes my_fade_animation {\n * from { opacity:1; }\n * to { opacity:0; }\n * }\n *\n * @-webkit-keyframes my_fade_animation {\n * from { opacity:1; }\n * to { opacity:0; }\n * }\n * ```\n *\n * Feel free also mix transitions and keyframes together as well as any other CSS classes on the same element.\n *\n * ### CSS Class-based Animations\n *\n * Class-based animations (animations that are triggered via `ngClass`, `ngShow`, `ngHide` and some other directives) have a slightly different\n * naming convention. Class-based animations are basic enough that a standard transition or keyframe can be referenced on the class being added\n * and removed.\n *\n * For example if we wanted to do a CSS animation for `ngHide` then we place an animation on the `.ng-hide` CSS class:\n *\n * ```html\n * \n * Show and hide me\n *
\n * \n *\n * \n * ```\n *\n * All that is going on here with ngShow/ngHide behind the scenes is the `.ng-hide` class is added/removed (when the hidden state is valid). Since\n * ngShow and ngHide are animation aware then we can match up a transition and ngAnimate handles the rest.\n *\n * In addition the addition and removal of the CSS class, ngAnimate also provides two helper methods that we can use to further decorate the animation\n * with CSS styles.\n *\n * ```html\n * \n * Highlight this box\n *
\n * \n *\n * \n * ```\n *\n * We can also make use of CSS keyframes by placing them within the CSS classes.\n *\n *\n * ### CSS Staggering Animations\n * A Staggering animation is a collection of animations that are issued with a slight delay in between each successive operation resulting in a\n * curtain-like effect. The ngAnimate module (versions >=1.2) supports staggering animations and the stagger effect can be\n * performed by creating a **ng-EVENT-stagger** CSS class and attaching that class to the base CSS class used for\n * the animation. The style property expected within the stagger class can either be a **transition-delay** or an\n * **animation-delay** property (or both if your animation contains both transitions and keyframe animations).\n *\n * ```css\n * .my-animation.ng-enter {\n * /* standard transition code */\n * transition: 1s linear all;\n * opacity:0;\n * }\n * .my-animation.ng-enter-stagger {\n * /* this will have a 100ms delay between each successive leave animation */\n * transition-delay: 0.1s;\n *\n * /* As of 1.4.4, this must always be set: it signals ngAnimate\n * to not accidentally inherit a delay property from another CSS class */\n * transition-duration: 0s;\n *\n * /* if you are using animations instead of transitions you should configure as follows:\n * animation-delay: 0.1s;\n * animation-duration: 0s; */\n * }\n * .my-animation.ng-enter.ng-enter-active {\n * /* standard transition styles */\n * opacity:1;\n * }\n * ```\n *\n * Staggering animations work by default in ngRepeat (so long as the CSS class is defined). Outside of ngRepeat, to use staggering animations\n * on your own, they can be triggered by firing multiple calls to the same event on $animate. However, the restrictions surrounding this\n * are that each of the elements must have the same CSS className value as well as the same parent element. A stagger operation\n * will also be reset if one or more animation frames have passed since the multiple calls to `$animate` were fired.\n *\n * The following code will issue the **ng-leave-stagger** event on the element provided:\n *\n * ```js\n * var kids = parent.children();\n *\n * $animate.leave(kids[0]); //stagger index=0\n * $animate.leave(kids[1]); //stagger index=1\n * $animate.leave(kids[2]); //stagger index=2\n * $animate.leave(kids[3]); //stagger index=3\n * $animate.leave(kids[4]); //stagger index=4\n *\n * window.requestAnimationFrame(function() {\n * //stagger has reset itself\n * $animate.leave(kids[5]); //stagger index=0\n * $animate.leave(kids[6]); //stagger index=1\n *\n * $scope.$digest();\n * });\n * ```\n *\n * Stagger animations are currently only supported within CSS-defined animations.\n *\n * ### The `ng-animate` CSS class\n *\n * When ngAnimate is animating an element it will apply the `ng-animate` CSS class to the element for the duration of the animation.\n * This is a temporary CSS class and it will be removed once the animation is over (for both JavaScript and CSS-based animations).\n *\n * Therefore, animations can be applied to an element using this temporary class directly via CSS.\n *\n * ```css\n * .zipper.ng-animate {\n * transition:0.5s linear all;\n * }\n * .zipper.ng-enter {\n * opacity:0;\n * }\n * .zipper.ng-enter.ng-enter-active {\n * opacity:1;\n * }\n * .zipper.ng-leave {\n * opacity:1;\n * }\n * .zipper.ng-leave.ng-leave-active {\n * opacity:0;\n * }\n * ```\n *\n * (Note that the `ng-animate` CSS class is reserved and it cannot be applied on an element directly since ngAnimate will always remove\n * the CSS class once an animation has completed.)\n *\n *\n * ### The `ng-[event]-prepare` class\n *\n * This is a special class that can be used to prevent unwanted flickering / flash of content before\n * the actual animation starts. The class is added as soon as an animation is initialized, but removed\n * before the actual animation starts (after waiting for a $digest).\n * It is also only added for *structural* animations (`enter`, `move`, and `leave`).\n *\n * In practice, flickering can appear when nesting elements with structural animations such as `ngIf`\n * into elements that have class-based animations such as `ngClass`.\n *\n * ```html\n * \n *
\n * ```\n *\n * It is possible that during the `enter` animation, the `.message` div will be briefly visible before it starts animating.\n * In that case, you can add styles to the CSS that make sure the element stays hidden before the animation starts:\n *\n * ```css\n * .message.ng-enter-prepare {\n * opacity: 0;\n * }\n * ```\n *\n * ### Animating between value changes\n *\n * Sometimes you need to animate between different expression states, whose values\n * don't necessary need to be known or referenced in CSS styles.\n * Unless possible with another {@link ngAnimate#directive-support \"animation aware\" directive},\n * that specific use case can always be covered with {@link ngAnimate.directive:ngAnimateSwap} as\n * can be seen in {@link ngAnimate.directive:ngAnimateSwap#examples this example}.\n *\n * Note that {@link ngAnimate.directive:ngAnimateSwap} is a *structural directive*, which means it\n * creates a new instance of the element (including any other/child directives it may have) and\n * links it to a new scope every time *swap* happens. In some cases this might not be desirable\n * (e.g. for performance reasons, or when you wish to retain internal state on the original\n * element instance).\n *\n * ## JavaScript-based Animations\n *\n * ngAnimate also allows for animations to be consumed by JavaScript code. The approach is similar to CSS-based animations (where there is a shared\n * CSS class that is referenced in our HTML code) but in addition we need to register the JavaScript animation on the module. By making use of the\n * `module.animation()` module function we can register the animation.\n *\n * Let's see an example of a enter/leave animation using `ngRepeat`:\n *\n * ```html\n * \n * ```\n *\n * See the **slide** CSS class? Let's use that class to define an animation that we'll structure in our module code by using `module.animation`:\n *\n * ```js\n * myModule.animation('.slide', [function() {\n * return {\n * // make note that other events (like addClass/removeClass)\n * // have different function input parameters\n * enter: function(element, doneFn) {\n * jQuery(element).fadeIn(1000, doneFn);\n *\n * // remember to call doneFn so that AngularJS\n * // knows that the animation has concluded\n * },\n *\n * move: function(element, doneFn) {\n * jQuery(element).fadeIn(1000, doneFn);\n * },\n *\n * leave: function(element, doneFn) {\n * jQuery(element).fadeOut(1000, doneFn);\n * }\n * }\n * }]);\n * ```\n *\n * The nice thing about JS-based animations is that we can inject other services and make use of advanced animation libraries such as\n * greensock.js and velocity.js.\n *\n * If our animation code class-based (meaning that something like `ngClass`, `ngHide` and `ngShow` triggers it) then we can still define\n * our animations inside of the same registered animation, however, the function input arguments are a bit different:\n *\n * ```html\n * \n * \n *
\n * \n * this box is moody\n *
\n * \n * \n * \n * ```\n *\n * ```js\n * myModule.animation('.colorful', [function() {\n * return {\n * addClass: function(element, className, doneFn) {\n * // do some cool animation and call the doneFn\n * },\n * removeClass: function(element, className, doneFn) {\n * // do some cool animation and call the doneFn\n * },\n * setClass: function(element, addedClass, removedClass, doneFn) {\n * // do some cool animation and call the doneFn\n * }\n * }\n * }]);\n * ```\n *\n * ## CSS + JS Animations Together\n *\n * AngularJS 1.4 and higher has taken steps to make the amalgamation of CSS and JS animations more flexible. However, unlike earlier versions of AngularJS,\n * defining CSS and JS animations to work off of the same CSS class will not work anymore. Therefore the example below will only result in **JS animations taking\n * charge of the animation**:\n *\n * ```html\n * \n * ```\n *\n * ```js\n * myModule.animation('.slide', [function() {\n * return {\n * enter: function(element, doneFn) {\n * jQuery(element).slideIn(1000, doneFn);\n * }\n * }\n * }]);\n * ```\n *\n * ```css\n * .slide.ng-enter {\n * transition:0.5s linear all;\n * transform:translateY(-100px);\n * }\n * .slide.ng-enter.ng-enter-active {\n * transform:translateY(0);\n * }\n * ```\n *\n * Does this mean that CSS and JS animations cannot be used together? Do JS-based animations always have higher priority? We can make up for the\n * lack of CSS animations by using the `$animateCss` service to trigger our own tweaked-out, CSS-based animations directly from\n * our own JS-based animation code:\n *\n * ```js\n * myModule.animation('.slide', ['$animateCss', function($animateCss) {\n * return {\n * enter: function(element) {\n* // this will trigger `.slide.ng-enter` and `.slide.ng-enter-active`.\n * return $animateCss(element, {\n * event: 'enter',\n * structural: true\n * });\n * }\n * }\n * }]);\n * ```\n *\n * The nice thing here is that we can save bandwidth by sticking to our CSS-based animation code and we don't need to rely on a 3rd-party animation framework.\n *\n * The `$animateCss` service is very powerful since we can feed in all kinds of extra properties that will be evaluated and fed into a CSS transition or\n * keyframe animation. For example if we wanted to animate the height of an element while adding and removing classes then we can do so by providing that\n * data into `$animateCss` directly:\n *\n * ```js\n * myModule.animation('.slide', ['$animateCss', function($animateCss) {\n * return {\n * enter: function(element) {\n * return $animateCss(element, {\n * event: 'enter',\n * structural: true,\n * addClass: 'maroon-setting',\n * from: { height:0 },\n * to: { height: 200 }\n * });\n * }\n * }\n * }]);\n * ```\n *\n * Now we can fill in the rest via our transition CSS code:\n *\n * ```css\n * /* the transition tells ngAnimate to make the animation happen */\n * .slide.ng-enter { transition:0.5s linear all; }\n *\n * /* this extra CSS class will be absorbed into the transition\n * since the $animateCss code is adding the class */\n * .maroon-setting { background:red; }\n * ```\n *\n * And `$animateCss` will figure out the rest. Just make sure to have the `done()` callback fire the `doneFn` function to signal when the animation is over.\n *\n * To learn more about what's possible be sure to visit the {@link ngAnimate.$animateCss $animateCss service}.\n *\n * ## Animation Anchoring (via `ng-animate-ref`)\n *\n * ngAnimate in AngularJS 1.4 comes packed with the ability to cross-animate elements between\n * structural areas of an application (like views) by pairing up elements using an attribute\n * called `ng-animate-ref`.\n *\n * Let's say for example we have two views that are managed by `ng-view` and we want to show\n * that there is a relationship between two components situated in within these views. By using the\n * `ng-animate-ref` attribute we can identify that the two components are paired together and we\n * can then attach an animation, which is triggered when the view changes.\n *\n * Say for example we have the following template code:\n *\n * ```html\n * \n * \n *
\n *\n * \n * \n * ![](\"./banner.jpg\")
\n * \n *\n * \n * \n * ```\n *\n * Now, when the view changes (once the link is clicked), ngAnimate will examine the\n * HTML contents to see if there is a match reference between any components in the view\n * that is leaving and the view that is entering. It will scan both the view which is being\n * removed (leave) and inserted (enter) to see if there are any paired DOM elements that\n * contain a matching ref value.\n *\n * The two images match since they share the same ref value. ngAnimate will now create a\n * transport element (which is a clone of the first image element) and it will then attempt\n * to animate to the position of the second image element in the next view. For the animation to\n * work a special CSS class called `ng-anchor` will be added to the transported element.\n *\n * We can now attach a transition onto the `.banner.ng-anchor` CSS class and then\n * ngAnimate will handle the entire transition for us as well as the addition and removal of\n * any changes of CSS classes between the elements:\n *\n * ```css\n * .banner.ng-anchor {\n * /* this animation will last for 1 second since there are\n * two phases to the animation (an `in` and an `out` phase) */\n * transition:0.5s linear all;\n * }\n * ```\n *\n * We also **must** include animations for the views that are being entered and removed\n * (otherwise anchoring wouldn't be possible since the new view would be inserted right away).\n *\n * ```css\n * .view-animation.ng-enter, .view-animation.ng-leave {\n * transition:0.5s linear all;\n * position:fixed;\n * left:0;\n * top:0;\n * width:100%;\n * }\n * .view-animation.ng-enter {\n * transform:translateX(100%);\n * }\n * .view-animation.ng-leave,\n * .view-animation.ng-enter.ng-enter-active {\n * transform:translateX(0%);\n * }\n * .view-animation.ng-leave.ng-leave-active {\n * transform:translateX(-100%);\n * }\n * ```\n *\n * Now we can jump back to the anchor animation. When the animation happens, there are two stages that occur:\n * an `out` and an `in` stage. The `out` stage happens first and that is when the element is animated away\n * from its origin. Once that animation is over then the `in` stage occurs which animates the\n * element to its destination. The reason why there are two animations is to give enough time\n * for the enter animation on the new element to be ready.\n *\n * The example above sets up a transition for both the in and out phases, but we can also target the out or\n * in phases directly via `ng-anchor-out` and `ng-anchor-in`.\n *\n * ```css\n * .banner.ng-anchor-out {\n * transition: 0.5s linear all;\n *\n * /* the scale will be applied during the out animation,\n * but will be animated away when the in animation runs */\n * transform: scale(1.2);\n * }\n *\n * .banner.ng-anchor-in {\n * transition: 1s linear all;\n * }\n * ```\n *\n *\n *\n *\n * ### Anchoring Demo\n *\n \n
\n \n
\n Welcome to the home page\n
Please click on an element
\n \n {{ record.title }}\n \n\n {{ profile.title }}\n
\n