React Common - Object Structures - animationConfig

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.

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

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
  }

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.

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
  }

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.