animationConfig

Defines animation options.

Type: Object

complete

A function called after animation is completed.

Type: function
Function parameters:
$element: jQuery
The animated object.
config: Object
The animation configuration object.

delay

A number specifying wait time before animation execution.

Type: Number
Default Value: 0

direction

Specifies the animation direction for the "slideIn" and "slideOut" animation types.

Type: String
Default Value: undefined
Accepted Values: 'top' | 'bottom' | 'left' | 'right'

When using a widget as an ASP.NET MVC Control, specify this option using the Direction enum. This enum accepts the following values: Top, Bottom, Left and Right.

duration

A number specifying the time in milliseconds spent on animation.

Type: Number
Default Value: 400

easing

A string specifying the easing function for animation.

Type: String
Default Value: 'ease'

DevExtreme supports predefined jQuery easing ("linear" and "swing") and CSS transition timing functions ("linear", "ease", "ease-in", "ease-out", "ease-in-out", "cubic-besier(0,1,1,0)", etc.). For more information on CSS transition timing functions, see CSS3 transition-timing-function Property. You can also register a custom easing function using jQuery and pass its name to the easing option.

JavaScript
$.easing.customEasing = function(t, millisecondsSince, startValue, endValue, totalDuration) {
    if (t < 0.5) {
        return t * 4;
    } else {
        return -2 * t + 3;
    }
};

var animationOptions = {
    show: {
        duration: 2000,
        type: "slide",
        from: { left: -300 },
        easing: "customEasing"
    }
};

When using a widget as an ASP.NET MVC Control, specify this option using the AnimationEasing enum. This enum accepts the following values: Ease, EaseIn, EaseInOut, EaseOut, Linear, Swing, StepStart and StepEnd.

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .Animation(a => a
        .Hide(h => h.Easing(AnimationEasing.Linear))
    )
)
@(Html.DevExtreme().WidgetName() _
    .Animation(Sub(a)
        a.Hide(Sub(h) h.Easing(AnimationEasing.Linear))
    End Sub)
)

In case you want to employ the cubic-bezier transition function, use the EasingCubicBezier() method that accepts four values of the double type.

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .Animation(a => a
        .Hide(h => h.EasingCubicBezier(0, 1, 1, 0))
    )
)
@(Html.DevExtreme().WidgetName() _
    .Animation(Sub(a)
        a.Hide(Sub(h) h.EasingCubicBezier(0, 1, 1, 0))
    End Sub)
)

from

Specifies the initial animation state.

Default Value: {}

The option can take on the following values, depending on the animation type.

  • fade
    The from option takes on a numeric value from 0 to 1, which specifies the initial element opacity.

    JavaScript
    from: 0.1
  • pop
    The option can take on an object containing the scale and opacity properties, which specify the initial element scale and opacity, respectively. Each property can take on a numeric value of 0 to 1.

    JavaScript
    from: {
        scale: 0.2,
        opacity: 0
    }
  • slide
    The option takes on an object containing the opacity property and properties specifying the element position (top, left, bottom, and right).

    JavaScript
    from: {
        opacity: 0.5,
        top: -100
    }
  • css
    The option takes on a string specifying the CSS class or several CSS classes delimited by comma that you want to apply at the animation start.

    JavaScript
    CSS
    from: 'fade-out'
    .fade-out { opacity: 1; }

You can specify the initial or target element position relative to the current element position. For this purpose use the += or -= operators.

JavaScript
from: {
    top: "-=300",
}
to: {
    top: "+=200",
}

When using ASP.NET MVC Controls, you can specify this option with an object instead of the usual lambda expression.

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .Animation(a => a
        .Show(s => s
            .From(new { scale = 0.2, opacity = 0.7 })
        )
    )
)
@(Html.DevExtreme().WidgetName() _
    .Animation(Sub(a)
        a.Show(Sub(s)
            s.From(New With { .scale = 0.2, .opacity = 0.7 })
        End Sub)
    End Sub)
)

staggerDelay

A number specifying the time period to wait before the animation of the next stagger item starts.

Type: Number
Default Value: undefined

Specify this option for a staggered animation - when several elements are animated one after another with a delay. Note that this type of animation can be performed only by the TransitionExecutor.

start

A function called before animation is started.

Type: function
Function parameters:
$element: jQuery
The animated object.
config: Object
The animation configuration object.

to

Specifies a final animation state.

Default Value: {}

The current option can take on the following values, depending on the animation type.

  • fade
    The to option takes on a numeric value of 0 to 1, which specifies target element opacity.

    JavaScript
    to: 1
  • pop
    The option can take on an object containing the scale and opacity properties, which specify the target element scale and opacity, respectively. Each property can take on a numeric value of 0 to 1.

    JavaScript
    to: {
        scale: 1,
        opacity: 1
    }
  • slide
    The option takes on an object containing the opacity property and properties specifying the element position (top, left, bottom and right).

    JavaScript
    to: {
        opacity: 1,
        top: 0
    }
  • css
    The option takes on a string specifying the CSS class or several CSS classes delimited by comma that you want to apply at the animation end.

    JavaScript
    CSS
    from: 'fade-out-active'
    .fade-out-active { opacity: 1; }

You can specify the initial or target element position relative to the current element position. For this purpose, use the += or -= operators.

JavaScript
from: {
    top: "-=300",
}
to: {
    top: "+=200",
}

When using ASP.NET MVC Controls, you can specify this option with an object instead of the usual lambda expression.

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .Animation(a => a
        .Show(s => s
            .To(new { scale = 1, opacity = 1 })
        )
    )
)
@(Html.DevExtreme().WidgetName() _
    .Animation(Sub(a)
        a.Show(Sub(s)
            s.To(New With { .scale = 1, .opacity = 1 })
        End Sub)
    End Sub)
)

type

A string value specifying the animation type.

Type: String
Default Value: 'custom'
Accepted Values: 'fade' | 'fadeIn' | 'fadeOut' | 'pop' | 'slide' | 'slideIn' | 'slideOut' | 'css'

The value of the option affects the widget's initial and target states, which are specified using the from and to options.

The type options can take on the following values.

  • "fade"
    Animates element opacity.

  • "fadeIn"
    Animates element opacity from 0 to 1.

  • "fadeOut"
    Animates element opacity from 1 to 0.

  • "pop"
    Animates element scale.

  • "slide"
    Animates element position.

  • "slideIn"
    Moves the element from outside the screen to the target position.

  • "slideOut"
    Moves the element from the initial position to outside the screen.

  • "css"
    Applies the CSS style(s) specified by the from option and then applies the style(s) specified by the to option. The class that is applied at the animation end is appended to the class applied at the animation start. This allows not to duplicate the CSS properties that are common for the animation start and end.

    Here is an example of css animation:

    JavaScript
    CSS
    DX.fx.animate(element, { type: 'css', from: 'fade-out', to: 'fade-out-active', duration: 1000 });
    .fade-out { opacity: 1; }
    .fade-out-active { opacity: 0; }

If the type option is set to "slideIn" or "slideOut", specify the sliding direction using the direction option.

When using a widget as an ASP.NET MVC Control, specify this option using the AnimationType enum. This enum accepts the following values: Css, Fade, FadeIn, FadeOut, Pop, Slide, SlideIn and SlideOut.