\\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 * .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 *\\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 angular\\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 Angular,\\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 | '+R.settings.header_navigation[0]+' | '+R.settings.header_navigation[1]+' |
| \\\"+L+' | \\\"+R.settings.lang_clear_date+\\\" |