summaryrefslogtreecommitdiffstats
path: root/js
diff options
context:
space:
mode:
authorBernhard Posselt <dev@bernhard-posselt.com>2015-04-13 19:23:10 +0200
committerBernhard Posselt <dev@bernhard-posselt.com>2015-04-13 19:23:10 +0200
commit2c194953f0ff0f24b7f9a18815ec80971871951a (patch)
tree1dcb7bbf969a0b3ba08ec16ec89b3abb3eb20dc6 /js
parentf51129ae7f83b016155e7af81c479cf0f6a124e3 (diff)
update angularjs
Diffstat (limited to 'js')
-rw-r--r--js/vendor/angular-animate/.bower.json10
-rw-r--r--js/vendor/angular-animate/angular-animate.js4805
-rw-r--r--js/vendor/angular-animate/angular-animate.min.js72
-rw-r--r--js/vendor/angular-animate/angular-animate.min.js.map6
-rw-r--r--js/vendor/angular-animate/bower.json4
-rw-r--r--js/vendor/angular-animate/package.json2
-rw-r--r--js/vendor/angular-mocks/.bower.json10
-rw-r--r--js/vendor/angular-mocks/angular-mocks.js9
-rw-r--r--js/vendor/angular-mocks/bower.json4
-rw-r--r--js/vendor/angular-mocks/package.json2
-rw-r--r--js/vendor/angular-route/.bower.json10
-rw-r--r--js/vendor/angular-route/angular-route.js2
-rw-r--r--js/vendor/angular-route/angular-route.min.js2
-rw-r--r--js/vendor/angular-route/bower.json4
-rw-r--r--js/vendor/angular-route/package.json2
-rw-r--r--js/vendor/angular-sanitize/.bower.json10
-rw-r--r--js/vendor/angular-sanitize/angular-sanitize.js2
-rw-r--r--js/vendor/angular-sanitize/angular-sanitize.min.js2
-rw-r--r--js/vendor/angular-sanitize/bower.json4
-rw-r--r--js/vendor/angular-sanitize/package.json2
-rw-r--r--js/vendor/angular/.bower.json10
-rw-r--r--js/vendor/angular/angular-csp.css8
-rw-r--r--js/vendor/angular/angular.js588
-rw-r--r--js/vendor/angular/angular.min.js562
-rw-r--r--js/vendor/angular/angular.min.js.map4
-rw-r--r--js/vendor/angular/bower.json2
-rw-r--r--js/vendor/angular/package.json2
-rw-r--r--js/vendor/es6-shim/.bower.json8
-rw-r--r--js/vendor/es6-shim/CHANGELOG.md32
-rw-r--r--js/vendor/es6-shim/README.md47
-rw-r--r--js/vendor/es6-shim/bower.json2
-rw-r--r--js/vendor/es6-shim/component.json2
-rw-r--r--js/vendor/es6-shim/es6-sham.js2
-rw-r--r--js/vendor/es6-shim/es6-sham.map2
-rw-r--r--js/vendor/es6-shim/es6-sham.min.js2
-rw-r--r--js/vendor/es6-shim/es6-shim.js836
-rw-r--r--js/vendor/es6-shim/es6-shim.map2
-rw-r--r--js/vendor/es6-shim/es6-shim.min.js5
-rw-r--r--js/vendor/es6-shim/package.json14
39 files changed, 4206 insertions, 2888 deletions
diff --git a/js/vendor/angular-animate/.bower.json b/js/vendor/angular-animate/.bower.json
index 23a953456..0f44e04c4 100644
--- a/js/vendor/angular-animate/.bower.json
+++ b/js/vendor/angular-animate/.bower.json
@@ -1,17 +1,17 @@
{
"name": "angular-animate",
- "version": "1.4.0-build.3954+sha.9dfa949",
+ "version": "1.4.0-rc.0",
"main": "./angular-animate.js",
"ignore": [],
"dependencies": {
- "angular": "1.4.0-build.3954+sha.9dfa949"
+ "angular": "1.4.0-rc.0"
},
"homepage": "https://github.com/angular/bower-angular-animate",
- "_release": "1.4.0-build.3954+sha.9dfa949",
+ "_release": "1.4.0-rc.0",
"_resolution": {
"type": "version",
- "tag": "v1.4.0-build.3954+sha.9dfa949",
- "commit": "88352811af4efcdc48d0e6a5192b11f510c61b4a"
+ "tag": "v1.4.0-rc.0",
+ "commit": "a75c362178f4aac89b1daf1d8e9711f47ffa96da"
},
"_source": "git://github.com/angular/bower-angular-animate.git",
"_target": "~1.4.*",
diff --git a/js/vendor/angular-animate/angular-animate.js b/js/vendor/angular-animate/angular-animate.js
index 1ce72cf58..c6e8fb592 100644
--- a/js/vendor/angular-animate/angular-animate.js
+++ b/js/vendor/angular-animate/angular-animate.js
@@ -1,2139 +1,3268 @@
/**
- * @license AngularJS v1.4.0-build.3954+sha.9dfa949
+ * @license AngularJS v1.4.0-rc.0
* (c) 2010-2015 Google, Inc. http://angularjs.org
* License: MIT
*/
(function(window, angular, undefined) {'use strict';
-/* jshint maxlen: false */
+/* jshint ignore:start */
+var noop = angular.noop;
+var extend = angular.extend;
+var jqLite = angular.element;
+var forEach = angular.forEach;
+var isArray = angular.isArray;
+var isString = angular.isString;
+var isObject = angular.isObject;
+var isUndefined = angular.isUndefined;
+var isDefined = angular.isDefined;
+var isFunction = angular.isFunction;
+var isElement = angular.isElement;
+
+var ELEMENT_NODE = 1;
+var COMMENT_NODE = 8;
+
+var NG_ANIMATE_CHILDREN_DATA = '$$ngAnimateChildren';
+
+var isPromiseLike = function(p) {
+ return p && p.then ? true : false;
+}
+
+function mergeClasses(a,b) {
+ if (!a && !b) return '';
+ if (!a) return b;
+ if (!b) return a;
+ if (isArray(a)) a = a.join(' ');
+ if (isArray(b)) b = b.join(' ');
+ return a + ' ' + b;
+}
+
+function packageStyles(options) {
+ var styles = {};
+ if (options && (options.to || options.from)) {
+ styles.to = options.to;
+ styles.from = options.from;
+ }
+ return styles;
+}
+
+function pendClasses(classes, fix, isPrefix) {
+ var className = '';
+ classes = isArray(classes)
+ ? classes
+ : classes && isString(classes) && classes.length
+ ? classes.split(/\s+/)
+ : [];
+ forEach(classes, function(klass, i) {
+ if (klass && klass.length > 0) {
+ className += (i > 0) ? ' ' : '';
+ className += isPrefix ? fix + klass
+ : klass + fix;
+ }
+ });
+ return className;
+}
+
+function removeFromArray(arr, val) {
+ var index = arr.indexOf(val);
+ if (val >= 0) {
+ arr.splice(index, 1);
+ }
+}
+
+function stripCommentsFromElement(element) {
+ if (element.nodeType === ELEMENT_NODE) {
+ return jqLite(element);
+ }
+ if (element.length === 0) return [];
+
+ // there is no point of stripping anything if the element
+ // is the only element within the jqLite wrapper.
+ // (it's important that we retain the element instance.)
+ if (element.length === 1) {
+ return element[0].nodeType === ELEMENT_NODE && element;
+ } else {
+ return jqLite(extractElementNode(element));
+ }
+}
+
+function extractElementNode(element) {
+ if (!element[0]) return element;
+ for (var i = 0; i < element.length; i++) {
+ var elm = element[i];
+ if (elm.nodeType == ELEMENT_NODE) {
+ return elm;
+ }
+ }
+}
+
+function $$addClass($$jqLite, element, className) {
+ forEach(element, function(elm) {
+ $$jqLite.addClass(elm, className);
+ });
+}
+
+function $$removeClass($$jqLite, element, className) {
+ forEach(element, function(elm) {
+ $$jqLite.removeClass(elm, className);
+ });
+}
+
+function applyAnimationClassesFactory($$jqLite) {
+ return function(element, options) {
+ if (options.addClass) {
+ $$addClass($$jqLite, element, options.addClass);
+ options.addClass = null;
+ }
+ if (options.removeClass) {
+ $$removeClass($$jqLite, element, options.removeClass);
+ element.removeClass(options.removeClass);
+ options.removeClass = null;
+ }
+ }
+}
+
+function prepareAnimationOptions(options) {
+ options = options || {};
+ if (!options.$$prepared) {
+ var domOperation = options.domOperation || noop;
+ options.domOperation = function() {
+ options.$$domOperationFired = true;
+ domOperation();
+ domOperation = noop;
+ };
+ options.$$prepared = true;
+ }
+ return options;
+}
+
+function applyAnimationStyles(element, options) {
+ applyAnimationFromStyles(element, options);
+ applyAnimationToStyles(element, options);
+}
+
+function applyAnimationFromStyles(element, options) {
+ if (options.from) {
+ element.css(options.from);
+ options.from = null;
+ }
+}
+
+function applyAnimationToStyles(element, options) {
+ if (options.to) {
+ element.css(options.to);
+ options.to = null;
+ }
+}
+
+function mergeAnimationOptions(element, target, newOptions) {
+ var toAdd = (target.addClass || '') + ' ' + (newOptions.addClass || '');
+ var toRemove = (target.removeClass || '') + ' ' + (newOptions.removeClass || '');
+ var classes = resolveElementClasses(element.attr('class'), toAdd, toRemove);
+
+ extend(target, newOptions);
+
+ if (classes.addClass) {
+ target.addClass = classes.addClass;
+ } else {
+ target.addClass = null;
+ }
+
+ if (classes.removeClass) {
+ target.removeClass = classes.removeClass;
+ } else {
+ target.removeClass = null;
+ }
+
+ return target;
+}
+
+function resolveElementClasses(existing, toAdd, toRemove) {
+ var ADD_CLASS = 1;
+ var REMOVE_CLASS = -1;
+
+ var flags = {};
+ existing = splitClassesToLookup(existing);
+
+ toAdd = splitClassesToLookup(toAdd);
+ forEach(toAdd, function(value, key) {
+ flags[key] = ADD_CLASS;
+ });
+
+ toRemove = splitClassesToLookup(toRemove);
+ forEach(toRemove, function(value, key) {
+ flags[key] = flags[key] === ADD_CLASS ? null : REMOVE_CLASS;
+ });
+
+ var classes = {
+ addClass: '',
+ removeClass: ''
+ };
+
+ forEach(flags, function(val, klass) {
+ var prop, allow;
+ if (val === ADD_CLASS) {
+ prop = 'addClass';
+ allow = !existing[klass];
+ } else if (val === REMOVE_CLASS) {
+ prop = 'removeClass';
+ allow = existing[klass];
+ }
+ if (allow) {
+ if (classes[prop].length) {
+ classes[prop] += ' ';
+ }
+ classes[prop] += klass;
+ }
+ });
+
+ function splitClassesToLookup(classes) {
+ if (isString(classes)) {
+ classes = classes.split(' ');
+ }
+
+ var obj = {};
+ forEach(classes, function(klass) {
+ // sometimes the split leaves empty string values
+ // incase extra spaces were applied to the options
+ if (klass.length) {
+ obj[klass] = true;
+ }
+ });
+ return obj;
+ }
+
+ return classes;
+}
+
+var $$AnimateChildrenDirective = [function() {
+ return function(scope, element, attrs) {
+ var val = attrs.ngAnimateChildren;
+ if (angular.isString(val) && val.length === 0) { //empty attribute
+ element.data(NG_ANIMATE_CHILDREN_DATA, true);
+ } else {
+ attrs.$observe('ngAnimateChildren', function(value) {
+ value = value === 'on' || value === 'true';
+ element.data(NG_ANIMATE_CHILDREN_DATA, value);
+ });
+ }
+ };
+}];
/**
- * @ngdoc module
- * @name ngAnimate
- * @description
- *
- * The `ngAnimate` module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives.
- *
- * <div doc-module-components="ngAnimate"></div>
- *
- * # Usage
- *
- * To see animations in action, all that is required is to define the appropriate CSS classes
- * or to register a JavaScript animation via the `myModule.animation()` function. The directives that support animation automatically are:
- * `ngRepeat`, `ngInclude`, `ngIf`, `ngSwitch`, `ngShow`, `ngHide`, `ngView` and `ngClass`. Custom directives can take advantage of animation
- * by using the `$animate` service.
- *
- * Below is a more detailed breakdown of the supported animation events provided by pre-existing ng directives:
- *
- * | Directive | Supported Animations |
- * |----------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------|
- * | {@link ng.directive:ngRepeat#animations ngRepeat} | enter, leave and move |
- * | {@link ngRoute.directive:ngView#animations ngView} | enter and leave |
- * | {@link ng.directive:ngInclude#animations ngInclude} | enter and leave |
- * | {@link ng.directive:ngSwitch#animations ngSwitch} | enter and leave |
- * | {@link ng.directive:ngIf#animations ngIf} | enter and leave |
- * | {@link ng.directive:ngClass#animations ngClass} | add and remove (the CSS class(es) present) |
- * | {@link ng.directive:ngShow#animations ngShow} & {@link ng.directive:ngHide#animations ngHide} | add and remove (the ng-hide class value) |
- * | {@link ng.directive:form#animation-hooks form} & {@link ng.directive:ngModel#animation-hooks ngModel} | add and remove (dirty, pristine, valid, invalid & all other validations) |
- * | {@link module:ngMessages#animations ngMessages} | add and remove (ng-active & ng-inactive) |
- * | {@link module:ngMessages#animations ngMessage} | enter and leave |
- *
- * You can find out more information about animations upon visiting each directive page.
- *
- * Below is an example of how to apply animations to a directive that supports animation hooks:
+ * @ngdoc service
+ * @name $animateCss
+ * @kind object
*
- * ```html
- * <style type="text/css">
- * .slide.ng-enter, .slide.ng-leave {
- * -webkit-transition:0.5s linear all;
- * transition:0.5s linear all;
- * }
+ * @description
+ * The `$animateCss` service is a useful utility to trigger customized CSS-based transitions/keyframes
+ * from a JavaScript-based animation or directly from a directive. The purpose of `$animateCss` is NOT
+ * to side-step how `$animate` and ngAnimate work, but the goal is to allow pre-existing animations or
+ * directives to create more complex animations that can be purely driven using CSS code.
*
- * .slide.ng-enter { } /&#42; starting animations for enter &#42;/
- * .slide.ng-enter.ng-enter-active { } /&#42; terminal animations for enter &#42;/
- * .slide.ng-leave { } /&#42; starting animations for leave &#42;/
- * .slide.ng-leave.ng-leave-active { } /&#42; terminal animations for leave &#42;/
- * </style>
+ * Note that only browsers that support CSS transitions and/or keyframe animations are capable of
+ * rendering animations triggered via `$animateCss` (bad news for IE9 and lower).
*
- * <!--
- * the animate service will automatically add .ng-enter and .ng-leave to the element
- * to trigger the CSS transition/animations
- * -->
- * <ANY class="slide" ng-include="..."></ANY>
- * ```
+ * ## Usage
+ * Once again, `$animateCss` is designed to be used inside of a registered JavaScript animation that
+ * is powered by ngAnimate. It is possible to use `$animateCss` directly inside of a directive, however,
+ * any automatic control over cancelling animations and/or preventing animations from being run on
+ * child elements will not be handled by Angular. For this to work as expected, please use `$animate` to
+ * trigger the animation and then setup a JavaScript animation that injects `$animateCss` to trigger
+ * the CSS animation.
*
- * Keep in mind that, by default, if an animation is running, any child elements cannot be animated
- * until the parent element's animation has completed. This blocking feature can be overridden by
- * placing the `ng-animate-children` attribute on a parent container tag.
+ * The example below shows how we can create a folding animation on an element using `ng-if`:
*
* ```html
- * <div class="slide-animation" ng-if="on" ng-animate-children>
- * <div class="fade-animation" ng-if="on">
- * <div class="explode-animation" ng-if="on">
- * ...
- * </div>
- * </div>
+ * <!-- notice the `fold-animation` CSS class -->
+ * <div ng-if="onOff" class="fold-animation">
+ * This element will go BOOM
* </div>
+ * <button ng-click="onOff=true">Fold In</button>
* ```
*
- * When the `on` expression value changes and an animation is triggered then each of the elements within
- * will all animate without the block being applied to child elements.
- *
- * ## Are animations run when the application starts?
- * No they are not. When an application is bootstrapped Angular will disable animations from running to avoid
- * a frenzy of animations from being triggered as soon as the browser has rendered the screen. For this to work,
- * Angular will wait for two digest cycles until enabling animations. From there on, any animation-triggering
- * layout changes in the application will trigger animations as normal.
- *
- * In addition, upon bootstrap, if the routing system or any directives or load remote data (via $http) then Angular
- * will automatically extend the wait time to enable animations once **all** of the outbound HTTP requests
- * are complete.
+ * Now we create the **JavaScript animation** that will trigger the CSS transition:
*
- * ## CSS-defined Animations
- * The animate service will automatically apply two CSS classes to the animated element and these two CSS classes
- * are designed to contain the start and end CSS styling. Both CSS transitions and keyframe animations are supported
- * and can be used to play along with this naming structure.
+ * ```js
+ * ngModule.animation('.fold-animation', ['$animateCss', function($animateCss) {
+ * return {
+ * enter: function(element, doneFn) {
+ * var height = element[0].offsetHeight;
+ * var animation = $animateCss(element, {
+ * from: { height:'0px' },
+ * to: { height:height + 'px' },
+ * duration: 1 // one second
+ * });
+ *
+ * // if no possible animation can be triggered due
+ * // to the combination of options then `animation`
+ * // will be returned as undefined
+ * animation.start().done(doneFn);
+ * }
+ * }
+ * }]);
+ * ```
*
- * The following code below demonstrates how to perform animations using **CSS transitions** with Angular:
+ * ## More Advanced Uses
*
- * ```html
- * <style type="text/css">
- * /&#42;
- * The animate class is apart of the element and the ng-enter class
- * is attached to the element once the enter animation event is triggered
- * &#42;/
- * .reveal-animation.ng-enter {
- * -webkit-transition: 1s linear all; /&#42; Safari/Chrome &#42;/
- * transition: 1s linear all; /&#42; All other modern browsers and IE10+ &#42;/
- *
- * /&#42; The animation preparation code &#42;/
- * opacity: 0;
- * }
+ * `$animateCss` is the underlying code that ngAnimate uses to power **CSS-based animations** behind the scenes. Therefore CSS hooks
+ * like `.ng-EVENT`, `.ng-EVENT-active`, `.ng-EVENT-stagger` are all features that can be triggered using `$animateCss` via JavaScript code.
*
- * /&#42;
- * Keep in mind that you want to combine both CSS
- * classes together to avoid any CSS-specificity
- * conflicts
- * &#42;/
- * .reveal-animation.ng-enter.ng-enter-active {
- * /&#42; The animation code itself &#42;/
- * opacity: 1;
- * }
- * </style>
+ * This also means that just about any combination of adding classes, removing classes, setting styles, dynamically setting a keyframe animation,
+ * applying a hardcoded duration or delay value, changing the animation easing or applying a stagger animation are all options that work with
+ * `$animateCss`. The service itself is smart enough to figure out the combination of options and examine the element styling properties in order
+ * to provide a working animation that will run in CSS.
*
- * <div class="view-container">
- * <div ng-view class="reveal-animation"></div>
- * </div>
- * ```
+ * The example below showcases a more advanced version of the `.fold-animation` from the example above:
*
- * The following code below demonstrates how to perform animations using **CSS animations** with Angular:
- *
- * ```html
- * <style type="text/css">
- * .reveal-animation.ng-enter {
- * -webkit-animation: enter_sequence 1s linear; /&#42; Safari/Chrome &#42;/
- * animation: enter_sequence 1s linear; /&#42; IE10+ and Future Browsers &#42;/
- * }
- * @-webkit-keyframes enter_sequence {
- * from { opacity:0; }
- * to { opacity:1; }
- * }
- * @keyframes enter_sequence {
- * from { opacity:0; }
- * to { opacity:1; }
- * }
- * </style>
- *
- * <div class="view-container">
- * <div ng-view class="reveal-animation"></div>
- * </div>
+ * ```js
+ * ngModule.animation('.fold-animation', ['$animateCss', function($animateCss) {
+ * return {
+ * enter: function(element, doneFn) {
+ * var height = element[0].offsetHeight;
+ * var animation = $animateCss(element, {
+ * addClass: 'red large-text pulse-twice',
+ * easing: 'ease-out',
+ * from: { height:'0px' },
+ * to: { height:height + 'px' },
+ * duration: 1 // one second
+ * });
+ *
+ * // if no possible animation can be triggered due
+ * // to the combination of options then `animation`
+ * // will be returned as undefined
+ * animation.start().done(doneFn);
+ * }
+ * }
+ * }]);
* ```
*
- * Both CSS3 animations and transitions can be used together and the animate service will figure out the correct duration and delay timing.
- *
- * Upon DOM mutation, the event class is added first (something like `ng-enter`), then the browser prepares itself to add
- * the active class (in this case `ng-enter-active`) which then triggers the animation. The animation module will automatically
- * detect the CSS code to determine when the animation ends. Once the animation is over then both CSS classes will be
- * removed from the DOM. If a browser does not support CSS transitions or CSS animations then the animation will start and end
- * immediately resulting in a DOM element that is at its final state. This final state is when the DOM element
- * has no CSS transition/animation classes applied to it.
- *
- * ### Structural transition animations
- *
- * Structural transitions (such as enter, leave and move) will always apply a `0s none` transition
- * value to force the browser into rendering the styles defined in the setup (`.ng-enter`, `.ng-leave`
- * or `.ng-move`) class. This means that any active transition animations operating on the element
- * will be cut off to make way for the enter, leave or move animation.
- *
- * ### Class-based transition animations
- *
- * Class-based transitions refer to transition animations that are triggered when a CSS class is
- * added to or removed from the element (via `$animate.addClass`, `$animate.removeClass`,
- * `$animate.setClass`, or by directives such as `ngClass`, `ngModel` and `form`).
- * They are different when compared to structural animations since they **do not cancel existing
- * animations** nor do they **block successive transitions** from rendering on the same element.
- * This distinction allows for **multiple class-based transitions** to be performed on the same element.
- *
- * In addition to ngAnimate supporting the default (natural) functionality of class-based transition
- * animations, ngAnimate also decorates the element with starting and ending CSS classes to aid the
- * developer in further styling the element throughout the transition animation. Earlier versions
- * of ngAnimate may have caused natural CSS transitions to break and not render properly due to
- * $animate temporarily blocking transitions using `0s none` in order to allow the setup CSS class
- * (the `-add` or `-remove` class) to be applied without triggering an animation. However, as of
- * **version 1.3**, this workaround has been removed with ngAnimate and all non-ngAnimate CSS
- * class transitions are compatible with ngAnimate.
- *
- * There is, however, one special case when dealing with class-based transitions in ngAnimate.
- * When rendering class-based transitions that make use of the setup and active CSS classes
- * (e.g. `.fade-add` and `.fade-add-active` for when `.fade` is added) be sure to define
- * the transition value **on the active CSS class** and not the setup class.
+ * Since we're adding/removing CSS classes then the CSS transition will also pick those up:
*
* ```css
- * .fade-add {
- * /&#42; remember to place a 0s transition here
- * to ensure that the styles are applied instantly
- * even if the element already has a transition style &#42;/
- * transition:0s linear all;
- *
- * /&#42; starting CSS styles &#42;/
- * opacity:1;
+ * /&#42; since a hardcoded duration value of 1 was provided in the JavaScript animation code,
+ * the CSS classes below will be transitioned despite them being defined as regular CSS classes &#42;/
+ * .red { background:red; }
+ * .large-text { font-size:20px; }
+ *
+ * /&#42; we can also use a keyframe animation and $animateCss will make it work alongside the transition &#42;/
+ * .pulse-twice {
+ * animation: 0.5s pulse linear 2;
+ * -webkit-animation: 0.5s pulse linear 2;
* }
- * .fade-add.fade-add-active {
- * /&#42; this will be the length of the animation &#42;/
- * transition:1s linear all;
- * opacity:0;
- * }
- * ```
*
- * The setup CSS class (in this case `.fade-add`) also has a transition style property, however, it
- * has a duration of zero. This may not be required, however, incase the browser is unable to render
- * the styling present in this CSS class instantly then it could be that the browser is attempting
- * to perform an unnecessary transition.
- *
- * This workaround, however, does not apply to standard class-based transitions that are rendered
- * when a CSS class containing a transition is applied to an element:
+ * @keyframes pulse {
+ * from { transform: scale(0.5); }
+ * to { transform: scale(1.5); }
+ * }
*
- * ```css
- * /&#42; this works as expected &#42;/
- * .fade {
- * transition:1s linear all;
- * opacity:0;
+ * @-webkit-keyframes pulse {
+ * from { -webkit-transform: scale(0.5); }
+ * to { -webkit-transform: scale(1.5); }
* }
* ```
*
- * Please keep this in mind when coding the CSS markup that will be used within class-based transitions.
- * Also, try not to mix the two class-based animation flavors together since the CSS code may become
- * overly complex.
- *
- *
- * ### Preventing Collisions With Third Party Libraries
+ * Given this complex combination of CSS classes, styles and options, `$animateCss` will figure everything out and make the animation happen.
*
- * Some third-party frameworks place animation duration defaults across many element or className
- * selectors in order to make their code small and reuseable. This can lead to issues with ngAnimate, which
- * is expecting actual animations on these elements and has to wait for their completion.
+ * ## How the Options are handled
*
- * You can prevent this unwanted behavior by using a prefix on all your animation classes:
- *
- * ```css
- * /&#42; prefixed with animate- &#42;/
- * .animate-fade-add.animate-fade-add-active {
- * transition:1s linear all;
- * opacity:0;
- * }
- * ```
- *
- * You then configure `$animate` to enforce this prefix:
+ * `$animateCss` is very versatile and intelligent when it comes to figuring out what configurations to apply to the element to ensure the animation
+ * works with the options provided. Say for example we were adding a class that contained a keyframe value and we wanted to also animate some inline