jQuery/JS Common - Object Structures - animationConfig

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

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.

$.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 5 Control or a DevExtreme-Based ASP.NET Core Control, specify this option using the AnimationEasing enum. This enum accepts the following values: Ease, EaseIn, EaseInOut, EaseOut, Linear, Swing, StepStart and StepEnd.

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

@(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)
)

The values that this option 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 widget's opacity. 0 makes the widget 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 widget; a scale of 1 displays the widget 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 widget's position.
  Opacity is specified the same way as in the fade animation type. The widget'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 widget relative to its parent element or shifting the widget from its default position.

  JavaScript

  from: { 
      opacity: 0.5, 
      top: 100 // places the widget 100px below the parent element
      /* top: "+=100" // shifts the widget 100px below its default position */
  }
  ==== or ====
  from: {
      opacity: 0.5,
      position: { my: 'top', at: 'top', of: "#targetElement" } // places the top of the widget 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 option with an object instead of the usual lambda expression.

@(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)
)

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.

The values that this option 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 widget's opacity. 0 makes the widget 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 widget; a scale of 1 displays the widget in its default size.

  JavaScript

  to: {
      scale: 1,
      opacity: 1
  }

• slide
  to accepts an object with the opacity field and fields that configure the widget's position.
  Opacity is specified the same way as in the fade animation type. The widget'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 widget relative to its parent element or shifting the widget from its default position.

  JavaScript

  to: { 
      opacity: 1, 
      top: 10 // places the widget 10px below the parent element
      /* top: "+=10" // shifts the widget 10px below its default position */
  }
  ==== or ====
  to: {
      opacity: 1,
      position: { my: 'top', at: 'bottom', of: "#targetElement" } // places the top of the widget 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 option with an object instead of the usual lambda expression.

@(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)
)

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 5 Control or a DevExtreme-Based ASP.NET Core Control, specify this option using the AnimationType enum. This enum accepts the following values: Css, Fade, FadeIn, FadeOut, Pop, Slide, SlideIn and SlideOut.