directory search
AngularJS API Reference auto auto/service auto/service/$injector auto/service/$provide ng ng/directive ng/directive/a ng/directive/form ng/directive/input ng/directive/input[checkbox] ng/directive/input[date] ng/directive/input[dateTimeLocal] ng/directive/input[email] ng/directive/input[month] ng/directive/input[number] ng/directive/input[radio] ng/directive/input[text] ng/directive/input[time] ng/directive/input[url] ng/directive/input[week] ng/directive/ngApp ng/directive/ngBind ng/directive/ngBindHtml ng/directive/ngBindTemplate ng/directive/ngBlur ng/directive/ngChange ng/directive/ngChecked ng/directive/ngClass ng/directive/ngClassEven ng/directive/ngClassOdd ng/directive/ngClick ng/directive/ngCloak ng/directive/ngController ng/directive/ngCopy ng/directive/ngCsp ng/directive/ngCut ng/directive/ngDblclick ng/directive/ngDisabled ng/directive/ngFocus ng/directive/ngForm ng/directive/ngHide ng/directive/ngHref ng/directive/ngIf ng/directive/ngInclude ng/directive/ngInit ng/directive/ngKeydown ng/directive/ngKeypress ng/directive/ngKeyup ng/directive/ngList ng/directive/ngModel ng/directive/ngModelOptions ng/directive/ngMousedown ng/directive/ngMouseenter ng/directive/ngMouseleave ng/directive/ngMousemove ng/directive/ngMouseover ng/directive/ngMouseup ng/directive/ngNonBindable ng/directive/ngOpen ng/directive/ngPaste ng/directive/ngPluralize ng/directive/ngReadonly ng/directive/ngRepeat ng/directive/ngSelected ng/directive/ngShow ng/directive/ngSrc ng/directive/ngSrcset ng/directive/ngStyle ng/directive/ngSubmit ng/directive/ngSwitch ng/directive/ngTransclude ng/directive/ngValue ng/directive/script ng/directive/select ng/directive/textarea ng/filter ng/filter/currency ng/filter/date ng/filter/filter ng/filter/json ng/filter/limitTo ng/filter/lowercase ng/filter/number ng/filter/orderBy ng/filter/uppercase ng/function ng/function/angular.bind ng/function/angular.bootstrap ng/function/angular.copy ng/function/angular.element ng/function/angular.equals ng/function/angular.extend ng/function/angular.forEach ng/function/angular.fromJson ng/function/angular.identity ng/function/angular.injector ng/function/angular.isArray ng/function/angular.isDate ng/function/angular.isDefined ng/function/angular.isElement ng/function/angular.isFunction ng/function/angular.isNumber ng/function/angular.isObject ng/function/angular.isString ng/function/angular.isUndefined ng/function/angular.lowercase ng/function/angular.module ng/function/angular.noop ng/function/angular.toJson ng/function/angular.uppercase ng/object ng/object/angular.version ng/provider ng/provider/$animateProvider ng/provider/$compileProvider ng/provider/$controllerProvider ng/provider/$filterProvider ng/provider/$httpProvider ng/provider/$interpolateProvider ng/provider/$locationProvider ng/provider/$logProvider ng/provider/$parseProvider ng/provider/$rootScopeProvider ng/provider/$sceDelegateProvider ng/provider/$sceProvider ng/service ng/service/$anchorScroll ng/service/$animate ng/service/$cacheFactory ng/service/$compile ng/service/$controller ng/service/$document ng/service/$exceptionHandler ng/service/$filter ng/service/$http ng/service/$httpBackend ng/service/$interpolate ng/service/$interval ng/service/$locale ng/service/$location ng/service/$log ng/service/$parse ng/service/$q ng/service/$rootElement ng/service/$rootScope ng/service/$sce ng/service/$sceDelegate ng/service/$templateCache ng/service/$timeout ng/service/$window ng/type ng/type/$cacheFactory.Cache ng/type/$compile.directive.Attributes ng/type/$rootScope.Scope ng/type/angular.Module ng/type/form.FormController ng/type/ngModel.NgModelController ngAnimate ngAnimate/provider ngAnimate/provider/$animateProvider ngAnimate/service ngAnimate/service/$animate ngCookies ngCookies/service ngCookies/service/$cookies ngCookies/service/$cookieStore ngMessages ngMessages/directive ngMessages/directive/ngMessage ngMessages/directive/ngMessages ngMock ngMock/function ngMock/function/angular.mock.dump ngMock/function/angular.mock.inject ngMock/function/angular.mock.module ngMock/object ngMock/object/angular.mock ngMock/provider ngMock/provider/$exceptionHandlerProvider ngMock/service ngMock/service/$exceptionHandler ngMock/service/$httpBackend ngMock/service/$interval ngMock/service/$log ngMock/service/$timeout ngMock/type ngMock/type/angular.mock.TzDate ngMockE2E ngMockE2E/service ngMockE2E/service/$httpBackend ngResource ngResource/service ngResource/service/$resource ngRoute ngRoute/directive ngRoute/directive/ngView ngRoute/provider ngRoute/provider/$routeProvider ngRoute/service ngRoute/service/$route ngRoute/service/$routeParams ngSanitize ngSanitize/filter ngSanitize/filter/linky ngSanitize/service ngSanitize/service/$sanitize ngTouch ngTouch/directive ngTouch/directive/ngClick ngTouch/directive/ngSwipeLeft ngTouch/directive/ngSwipeRight ngTouch/service ngTouch/service/$swipe
characters

AngularJS: API: ngAnimate/service/$animate


$animate

  1. - $animateProvider
  2. - service in module ngAnimate

The $animate service provides animation detection support while performing DOM operations (enter, leave and move) as well as during addClass and removeClass operations. When any of these operations are run, the $animate service will examine any JavaScript-defined animations (which are defined by using the $animateProvider provider object) as well as any CSS-defined animations against the CSS classes present on the element once the DOM operation is run.

The $animate service is used behind the scenes with pre-existing directives and animation with these directives will work out of the box without any extra configuration.

Requires the ngAnimate module to be installed.

Please visit the ngAnimate module overview page learn more about how to use animations in your application.

用法

$animate();

方法

  • enter(element, parentElement, afterElement, [doneCallback]);

    Appends the element to the parentElement element that resides in the document and then runs the enter animation. Once the animation is started, the following CSS classes will be present on the element for the duration of the animation:

    Below is a breakdown of each step that occurs during enter animation:

    动画步骤 元素的class属性看上去像
    1. $animate.enter(...) is called class="my-animation"
    2. element is inserted into the parentElement element or beside the afterElement element class="my-animation"
    3. $animate waits for the next digest to start the animation class="my-animation ng-animate"
    4. $animate runs the JavaScript-defined animations detected on the element class="my-animation ng-animate"
    5. the .ng-enter class is added to the element class="my-animation ng-animate ng-enter"
    6. $animate scans the element styles to get the CSS transition/animation duration and delay class="my-animation ng-animate ng-enter"
    7. $animate blocks all CSS transitions on the element to ensure the .ng-enter class styling is applied right away class="my-animation ng-animate ng-enter"
    8. $animate waits for a single animation frame (this performs a reflow) class="my-animation ng-animate ng-enter"
    9. $animate removes the CSS transition block placed on the element class="my-animation ng-animate ng-enter"
    10. the .ng-enter-active class is added (this triggers the CSS transition/animation) class="my-animation ng-animate ng-enter ng-enter-active"
    11. $animate waits for the animation to complete (via events and timeout) class="my-animation ng-animate ng-enter ng-enter-active"
    12. The animation ends and all generated CSS classes are removed from the element class="my-animation"
    13. The doneCallback() callback is fired (if provided) class="my-animation"

    参数

    参数 类型 详述
    element DOMElement

    the element that will be the focus of the enter animation

    parentElement DOMElement

    the parent element of the element that will be the focus of the enter animation

    afterElement DOMElement

    the sibling element (which is the previous element) of the element that will be the focus of the enter animation

    doneCallback
    (可选)
    function()=

    the callback function that will be called once the animation is complete

    返回值

    Function

    the animation cancellation function

  • leave(element, [doneCallback]);

    Runs the leave animation operation and, upon completion, removes the element from the DOM. Once the animation is started, the following CSS classes will be added for the duration of the animation:

    Below is a breakdown of each step that occurs during leave animation:

    动画步骤 元素的class属性看上去像
    1. $animate.leave(...) is called class="my-animation"
    2. $animate runs the JavaScript-defined animations detected on the element class="my-animation ng-animate"
    3. $animate waits for the next digest to start the animation class="my-animation ng-animate"
    4. the .ng-leave class is added to the element class="my-animation ng-animate ng-leave"
    5. $animate scans the element styles to get the CSS transition/animation duration and delay class="my-animation ng-animate ng-leave"
    6. $animate blocks all CSS transitions on the element to ensure the .ng-leave class styling is applied right away class="my-animation ng-animate ng-leave”
    7. $animate waits for a single animation frame (this performs a reflow) class="my-animation ng-animate ng-leave"
    8. $animate removes the CSS transition block placed on the element class="my-animation ng-animate ng-leave”
    9. the .ng-leave-active class is added (this triggers the CSS transition/animation) class="my-animation ng-animate ng-leave ng-leave-active"
    10. $animate waits for the animation to complete (via events and timeout) class="my-animation ng-animate ng-leave ng-leave-active"
    11. The animation ends and all generated CSS classes are removed from the element class="my-animation"
    12. The element is removed from the DOM ...
    13. The doneCallback() callback is fired (if provided) ...

    参数

    参数 类型 详述
    element DOMElement

    the element that will be the focus of the leave animation

    doneCallback
    (可选)
    function()=

    the callback function that will be called once the animation is complete

    返回值

    Function

    the animation cancellation function

  • move(element, parentElement, afterElement, [doneCallback]);

    Fires the move DOM operation. Just before the animation starts, the animate service will either append it into the parentElement container or add the element directly after the afterElement element if present. Then the move animation will be run. Once the animation is started, the following CSS classes will be added for the duration of the animation:

    Below is a breakdown of each step that occurs during move animation:

    动画步骤 元素的class属性看上去像
    1. $animate.move(...) is called class="my-animation"
    2. element is moved into the parentElement element or beside the afterElement element class="my-animation"
    3. $animate waits for the next digest to start the animation class="my-animation ng-animate"
    4. $animate runs the JavaScript-defined animations detected on the element class="my-animation ng-animate"
    5. the .ng-move class is added to the element class="my-animation ng-animate ng-move"
    6. $animate scans the element styles to get the CSS transition/animation duration and delay class="my-animation ng-animate ng-move"
    7. $animate blocks all CSS transitions on the element to ensure the .ng-move class styling is applied right away class="my-animation ng-animate ng-move”
    8. $animate waits for a single animation frame (this performs a reflow) class="my-animation ng-animate ng-move"
    9. $animate removes the CSS transition block placed on the element class="my-animation ng-animate ng-move”
    10. the .ng-move-active class is added (this triggers the CSS transition/animation) class="my-animation ng-animate ng-move ng-move-active"
    11. $animate waits for the animation to complete (via events and timeout) class="my-animation ng-animate ng-move ng-move-active"
    12. The animation ends and all generated CSS classes are removed from the element class="my-animation"
    13. The doneCallback() callback is fired (if provided) class="my-animation"

    参数

    参数 类型 详述
    element DOMElement

    the element that will be the focus of the move animation

    parentElement DOMElement

    the parentElement element of the element that will be the focus of the move animation

    afterElement DOMElement

    the sibling element (which is the previous element) of the element that will be the focus of the move animation

    doneCallback
    (可选)
    function()=

    the callback function that will be called once the animation is complete

    返回值

    Function

    the animation cancellation function

  • addClass(element, className, [doneCallback]);

    Triggers a custom animation event based off the className variable and then attaches the className value to the element as a CSS class. Unlike the other animation methods, the animate service will suffix the className value with -add in order to provide the animate service the setup and active CSS classes in order to trigger the animation (this will be skipped if no CSS transitions or keyframes are defined on the -add-active or base CSS class).

    Below is a breakdown of each step that occurs during addClass animation:

    动画步骤 元素的class属性看上去像
    1. $animate.addClass(element, 'super') is called class="my-animation"
    2. $animate runs the JavaScript-defined animations detected on the element class="my-animation ng-animate"
    3. the .super-add class is added to the element class="my-animation ng-animate super-add"
    4. $animate waits for a single animation frame (this performs a reflow) class="my-animation ng-animate super-add"
    5. the .super and .super-add-active classes are added (this triggers the CSS transition/animation) class="my-animation ng-animate super super-add super-add-active"
    6. $animate scans the element styles to get the CSS transition/animation duration and delay class="my-animation ng-animate super-add"
    7. $animate waits for the animation to complete (via events and timeout) class="my-animation super super-add super-add-active"
    8. The animation ends and all generated CSS classes are removed from the element class="my-animation super"
    9. The super class is kept on the element class="my-animation super"
    10. The doneCallback() callback is fired (if provided) class="my-animation super"

    参数

    参数 类型 详述
    element DOMElement

    the element that will be animated

    className string

    the CSS class that will be added to the element and then animated

    doneCallback
    (可选)
    function()=

    the callback function that will be called once the animation is complete

    返回值

    Function

    the animation cancellation function

  • removeClass(element, className, [doneCallback]);

    Triggers a custom animation event based off the className variable and then removes the CSS class provided by the className value from the element. Unlike the other animation methods, the animate service will suffix the className value with -remove in order to provide the animate service the setup and active CSS classes in order to trigger the animation (this will be skipped if no CSS transitions or keyframes are defined on the -remove or base CSS classes).

    Below is a breakdown of each step that occurs during removeClass animation:

    动画步骤 元素的class属性看上去像
    1. $animate.removeClass(element, 'super') is called class="my-animation super"
    2. $animate runs the JavaScript-defined animations detected on the element class="my-animation super ng-animate"
    3. the .super-remove class is added to the element class="my-animation super ng-animate super-remove"
    4. $animate waits for a single animation frame (this performs a reflow) class="my-animation super ng-animate super-remove"
    5. the .super-remove-active classes are added and .super is removed (this triggers the CSS transition/animation) class="my-animation ng-animate super-remove super-remove-active"
    6. $animate scans the element styles to get the CSS transition/animation duration and delay class="my-animation super ng-animate super-remove"
    7. $animate waits for the animation to complete (via events and timeout) class="my-animation ng-animate super-remove super-remove-active"
    8. The animation ends and all generated CSS classes are removed from the element class="my-animation"
    9. The doneCallback() callback is fired (if provided) class="my-animation"

    参数

    参数 类型 详述
    element DOMElement

    the element that will be animated

    className string

    the CSS class that will be animated and then removed from the element

    doneCallback
    (可选)
    function()=

    the callback function that will be called once the animation is complete

    返回值

    Function

    the animation cancellation function

  • setClass(element, add, remove, [done]);

    Adds and/or removes the given CSS classes to and from the element. Once complete, the done() callback will be fired (if provided).

    动画步骤 元素的class属性看上去像
    1. $animate.removeClass(element, ‘on’, ‘off’) is called class="my-animation super off”
    2. $animate runs the JavaScript-defined animations detected on the element class="my-animation super ng-animate off”
    3. the .on-add and .off-remove classes are added to the element class="my-animation ng-animate on-add off-remove off”
    4. $animate waits for a single animation frame (this performs a reflow) class="my-animation ng-animate on-add off-remove off”
    5. the .on, .on-add-active and .off-remove-active classes are added and .off is removed (this triggers the CSS transition/animation) class="my-animation ng-animate on on-add on-add-active off-remove off-remove-active”
    6. $animate scans the element styles to get the CSS transition/animation duration and delay class="my-animation ng-animate on on-add on-add-active off-remove off-remove-active"
    7. $animate waits for the animation to complete (via events and timeout) class="my-animation ng-animate on on-add on-add-active off-remove off-remove-active"
    8. The animation ends and all generated CSS classes are removed from the element class="my-animation"
    9. The doneCallback() callback is fired (if provided) class="my-animation"

    参数

    参数 类型 详述
    element DOMElement

    the element which will have its CSS classes changed removed from it

    add string

    the CSS classes which will be added to the element

    remove string

    the CSS class which will be removed from the element

    done
    (可选)
    function=

    the callback function (if provided) that will be fired after the CSS classes have been set on the element

    返回值

    Function

    the animation cancellation function

  • enabled([value], [element]);

    Globally enables/disables animations.

    参数

    参数 类型 详述
    value
    (可选)
    boolean

    If provided then set the animation on or off.

    element
    (可选)
    DOMElement

    If provided then the element will be used to represent the enable/disable operation

    返回值

    boolean

    Current animation state.


Previous article: Next article: