Clear Up
SharpKit Reference

AnimConfig Class

Namespace: Ext.fx

Base Types



Name Description


Name Description
alternate Used in conjunction with iterations to reverse the animation each time an iteration completes. Defaults to: false
callback A function to be run after the animation has completed.
delay Time to delay before starting the animation. Defaults to: 0
duration Time in milliseconds for a single animation to last. If the iterations property is specified, then each animate will take the same duration for each iteration. Defaults to: 250
dynamic Currently only for Component Animation: Only set a component's outer element size bypassing layouts. Set to true to do full layouts for every frame of the animation. Defaults to: false
easing This describes how the intermediate values used during a transition will be calculated. It allows for a transition to change speed over its duration.
  • backIn
  • backOut
  • bounceIn
  • bounceOut
  • ease
  • easeIn
  • easeOut
  • easeInOut
  • elasticIn
  • elasticOut
  • cubic-bezier(x1, y1, x2, y2)
  • Note that cubic-bezier will create a custom easing curve following the CSS3 transition-timing-function specification. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is invalid. Defaults to: "ease"
    from An object containing property/value pairs for the beginning of the animation. If not specified, the current state of the will be used. For example:
    from: {
                opacity: 0,       // Transparent
                color: '#ffffff', // White
                left: 0
    iterations Number of times to execute the animation. Defaults to: 1
    keyframes Animation keyframes follow the CSS3 Animation configuration pattern. 'from' is always considered '0%' and 'to' is considered '100%'. Every keyframe declaration must have a keyframe rule for 0% and 100%, possibly defined using "from" or "to". A keyframe declaration without these keyframe selectors is invalid and will not be available for animation. The keyframe declaration for a keyframe rule consists of properties and values. Properties that are unable to be animated are ignored in these rules, with the exception of 'easing' which can be changed at each keyframe. For example:
    keyframes : {
                '0%': {
                left: 100
                '40%': {
                left: 150
                '60%': {
                left: 75
                '100%': {
                left: 100
    listeners A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once. DOM events from Ext JS Components While some Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's itemclick event passing the node clicked on. To access DOM events directly from a child element of a Component, we need to specify the element option to identify the Component property to add a DOM listener to:
    new Ext.panel.Panel({
                width: 400,
                height: 200,
                dockedItems: [{
                xtype: 'toolbar'
                listeners: {
                click: {
                element: 'el', //bind to the underlying el property on the panel
                fn: function(){ console.log('click el'); }
                dblclick: {
                element: 'body', //bind to the underlying body property on the panel
                fn: function(){ console.log('dblclick body'); }
    reverse Run the animation from the end to the beginning Defaults to false. Defaults to: false
    scope The scope that the callback function will be called with
    target The to apply the animation to. This should only be specified when creating an Ext.fx.Anim directly. The target does not need to be a instance, it can be the underlying object. For example, you can pass a Component, Element or Sprite as the target and the Anim will create the appropriate object automatically.
    to An object containing property/value pairs for the end of the animation. For example:
    to: {
                opacity: 1,       // Opaque
                color: '#00ff00', // Green
                left: 500
    © Copyright 2005-2011 SharpKit. All rights reserved.