React Common - Object Structures - animationConfig

Defines animation properties.

Type:

Object

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:

Object

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:

String

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

When using a UI component as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, specify this property 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 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"
    }
};

When using a UI component as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, specify this property 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.

Type:

Number

|

String

|

Object

Default Value: {}

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

  • fade
    from accepts a number from 0 to 1 and specifies the UI component's opacity. 0 makes the UI component completely transparent; 1 makes it opaque.

    JavaScript
    from: 0.1
  • pop
    from accepts an object with the opacity and scale fields; each takes a value from 0 to 1.
    Opacity is specified the same way as in the fade animation type. A scale of 0 hides the UI component; a scale of 1 displays the UI component in its default size.

    JavaScript
    from: {
        scale: 0.2,
        opacity: 0
    }
  • slide
    from accepts an object with the opacity field and fields that configure the UI component's position.
    Opacity is specified the same way as in the fade animation type. The UI component's position can be set using the position field that accepts the position configuration object. This approach covers all cases. You can also use the top and left fields, which are shortcuts for positioning the UI component relative to its parent element or shifting the UI component from its default position.

    JavaScript
    from: { 
        opacity: 0.5, 
        top: 100 // places the UI component 100px below the parent element
        /* top: "+=100" // shifts the UI component 100px below its default position */
    }
    ==== or ====
    from: {
        opacity: 0.5,
        position: { my: 'top', at: 'top', of: "#targetElement" } // places the top of the UI component at the top of the "targetElement"
    }
  • css
    from accepts a string specifying a CSS class or several CSS classes separated by a comma.

    JavaScript
    CSS
    from: "fade-out-text, fade-out-visibility"
    .fade-out-visibility { opacity: 0; }
    .fade-out-text { font-size: 5pt; }

When using ASP.NET MVC 5 Controls or DevExtreme-Based ASP.NET Core Controls, you can specify this property 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 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:

Object

The animation configuration.

to

Specifies a final animation state.

Type:

Number

|

String

|

Object

Default Value: {}

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

  • fade
    to accepts a number from 0 to 1 and specifies the UI component's opacity. 0 makes the UI component completely transparent; 1 makes it opaque.

    JavaScript
    to: 1
  • pop
    to accepts an object with the opacity and scale fields; each takes a value from 0 to 1.
    Opacity is specified the same way as in the fade animation type. A scale of 0 hides the UI component; a scale of 1 displays the UI component in its default size.

    JavaScript
    to: {
        scale: 1,
        opacity: 1
    }
  • slide
    to accepts an object with the opacity field and fields that configure the UI component's position.
    Opacity is specified the same way as in the fade animation type. The UI component's position can be set using the position field that accepts the position configuration object. This approach covers all cases. You can also use the top and left fields, which are shortcuts for positioning the UI component relative to its parent element or shifting the UI component from its default position.

    JavaScript
    to: { 
        opacity: 1, 
        top: 10 // places the UI component 10px below the parent element
        /* top: "+=10" // shifts the UI component 10px below its default position */
    }
    ==== or ====
    to: {
        opacity: 1,
        position: { my: 'top', at: 'bottom', of: "#targetElement" } // places the top of the UI component at the bottom of the "targetElement"
    }
  • css
    to accepts a string specifying a CSS class or several CSS classes separated by a comma.

    JavaScript
    CSS
    to: "fade-out-active-text, fade-out-active-visibility"
    .fade-out-active-visibility { opacity: 1; }
    .fade-out-active-text { font-size: 15pt; }

When using ASP.NET MVC 5 Controls or DevExtreme-Based ASP.NET Core Controls, you can specify this property 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: 'css' | 'fade' | 'fadeIn' | 'fadeOut' | 'pop' | 'slide' | 'slideIn' | 'slideOut'

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.

When using a UI component as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, specify this property using the AnimationType enum. This enum accepts the following values: Css, Fade, FadeIn, FadeOut, Pop, Slide, SlideIn and SlideOut.