Touch 2.0.2 Sencha Docs

Ext.Anim

Files

Ext.Anim is used to excute simple animations defined in Ext.anims. The run method can take any of the properties defined below.

Ext.Anim.run(this, 'fade', {
    out: false,
    autoClear: true
});

When using run, ensure you require Ext.Anim in your application. Either do this using Ext.require:

Ext.requires('Ext.Anim');

when using Ext.setup:

Ext.setup({
    requires: ['Ext.Anim'],
    onReady: function() {
        //do something
    }
});

or when using Ext.application:

Ext.application({
    requires: ['Ext.Anim'],
    launch: function() {
        //do something
    }
});

Available since: 1.1.0

Defined By

Config options

Code to execute after the animation ends.

Code to execute after the animation ends.

Available since: 2.0.0

True to remove all custom CSS defined in the to config when the animation is over. ...

True to remove all custom CSS defined in the to config when the animation is over.

Defaults to: true

Available since: 1.1.0

Code to execute before starting the animation.

Code to execute before starting the animation.

Available since: 1.1.0

Time to delay before starting the animation. ...

Time to delay before starting the animation.

Defaults to: 0

Available since: 1.1.0

Valid values are 'left', 'right', 'up', 'down' and null.

Valid values are 'left', 'right', 'up', 'down' and null.

Available since: 1.1.0

True to disable animations. ...

True to disable animations.

Defaults to: false

Available since: 1.1.0

Time in milliseconds for the animation to last. ...

Time in milliseconds for the animation to last.

Defaults to: 250

Available since: 1.1.0

Valid values are 'ease', 'linear', ease-in', 'ease-out', 'ease-in-out' or a cubic-bezier curve as defined by CSS. ...

Valid values are 'ease', 'linear', ease-in', 'ease-out', 'ease-in-out' or a cubic-bezier curve as defined by CSS.

Defaults to: 'ease-in-out'

Available since: 1.1.0

An object of CSS values which the animation begins with. ...

An object of CSS values which the animation begins with. If you define a CSS property here, you must also define it in the to config.

Defaults to: {}

Available since: 1.1.0

True if you want the animation to slide out of the screen. ...

True if you want the animation to slide out of the screen.

Defaults to: true

Available since: 1.1.0

True to reverse the animation direction. ...

True to reverse the animation direction. For example, if the animation direction was set to 'left', it would then use 'right'.

Defaults to: false

Available since: 1.1.0

Scope to run the before function in.

Scope to run the before function in.

Available since: 1.1.0

An object of CSS values which the animation ends with. ...

An object of CSS values which the animation ends with. If you define a CSS property here, you must also define it in the from config.

Defaults to: {}

Available since: 1.1.0

Defined By

Properties

...

Defaults to: {from: {}, to: {}, duration: 250, delay: 0, easing: 'ease-in-out', autoClear: true, out: true, direction: null, reverse: false}

Available since: 1.1.0

Ext.Anim
view source
: Booleanprivate
...

Defaults to: true

Available since: 1.1.0

Defined By

Methods

Ext.Anim
view source
new( config ) : Ext.Anim
...

Available since: 1.1.0

Parameters

Returns

Ext.Anim
view source
( el, runConfig )private
...

Available since: 1.1.0

Parameters

Ext.Anim
view source
( ev, el, o )private
...

Available since: 1.1.0

Parameters

Ext.Anim
view source
( el, anim, config )
Used to run an animation on a specific element. ...

Used to run an animation on a specific element. Use the config argument to customize the animation

Available since: 1.1.0

Parameters