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