Vue Common - Object Structures - animationConfig

Defines animation properties.

import { AnimationConfig } from "devextreme/animation/fx"
Type:

Object

|

Number

|

String

complete

A function called after animation is completed.

Type:

Function

Function parameters:
$element:

HTMLElement | jQuery

The animated element. It is an HTML Element or a jQuery Element when you use jQuery.

config:

AnimationConfig

The animation configuration.

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:

Direction

Default Value: undefined

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 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.

jQuery

You can also implement predefined jQuery easing ("linear" and "swing"), or register a custom easing function and pass its name to the easing property.

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"
    }
};

from

Specifies an initial animation state. Use the to property to specify the final state.

Type: AnimationState
Default Value: {}

The values that this property accepts depend on the specified animation type. The following list illustrates the dependency:

  • "fade"
    Supported properties: opacity

    JavaScript
    {
    type: "fade",
    from: 0,
    to: 1,
    // ===== or =====
    from: { opacity: 0 },
    to: { opacity: 1 }
}

  • "pop"
    Supported properties: opacity, scale

    JavaScript
    {
    type: "pop",
    from: { opacity: 0, scale: 0 },
    to: { opacity: 1, scale: 1 }
}

  • "slide"
    Supported properties: opacity, position, top, left

    JavaScript
    {
    type: "slide",
    from: { opacity: 0, top: 100 },
    to: {
        opacity: 1,
        position: {
            my: "top",
            at: "bottom",
            of: "#targetElement"
        }
    }
}

  • "сss"
    Supported properties: none (use custom CSS classes)
    To apply more than one classes, separate them by comma.

    JavaScript
    CSS
    {
    type: "css",
    from: "transparent",
    to: "opaque, font-large"
}
    .transparent {
    opacity: 0;
}
.opaque {
    opacity: 1;
}
.font-large {
    font-size: 24pt
}

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 property 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:

HTMLElement | jQuery

The animated element. It is an HTML Element or a jQuery Element when you use jQuery.

config:

AnimationConfig

The animation configuration.

to

Specifies a final animation state. Use the from property to specify an initial state.

Type: AnimationState
Default Value: {}

The values that this property accepts depend on the specified animation type. The following list illustrates the dependency:

  • "fade"
    Supported properties: opacity

    JavaScript
    {
    type: "fade",
    from: 0,
    to: 1,
    // ===== or =====
    from: { opacity: 0 },
    to: { opacity: 1 }
}

  • "pop"
    Supported properties: opacity, scale

    JavaScript
    {
    type: "pop",
    from: { opacity: 0, scale: 0 },
    to: { opacity: 1, scale: 1 }
}

  • "slide"
    Supported properties: opacity, position, top, left

    JavaScript
    {
    type: "slide",
    from: { opacity: 0, top: 100 },
    to: {
        opacity: 1,
        position: {
            my: "top",
            at: "bottom",
            of: "#targetElement"
        }
    }
}

  • "сss"
    Supported properties: none (use custom CSS classes)
    To apply more than one classes, separate them by comma.

    JavaScript
    CSS
    {
    type: "css",
    from: "transparent",
    to: "opaque, font-large"
}
    .transparent {
    opacity: 0;
}
.opaque {
    opacity: 1;
}
.font-large {
    font-size: 24pt
}

type

A string value specifying the animation type.

Type:

AnimationType

Default Value: 'custom'

The value of the property affects the UI component's initial and target states, which are specified using the from and to properties.

The type properties 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 property and then applies the style(s) specified by the to property. 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 property is set to "slideIn" or "slideOut", specify the sliding direction using the direction property.