Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/Common/Object_Structures/AnimationConfig/ below:

Vue Common - Object Structures - animationConfig

Defines animation properties.

A function called after animation is completed.

A number specifying wait time before animation execution.

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

A number specifying the time in milliseconds spent on animation.

A string specifying the easing function for animation.

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.

You can also implement predefined jQuery easing ("linear" and "swing"), or register a custom easing function and pass its name to the easing 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"
    }
};

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

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

• "pop"
  Supported properties: opacity, scale

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

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

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

  {
      type: "css",
      from: "transparent",
      to: "opaque, font-large"
  }

  .transparent {
      opacity: 0;
  }
  .opaque {
      opacity: 1;
  }
  .font-large {
      font-size: 24pt
  }

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

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.

A function called before animation is started.

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

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

• "pop"
  Supported properties: opacity, scale

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

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

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

  {
      type: "css",
      from: "transparent",
      to: "opaque, font-large"
  }

  .transparent {
      opacity: 0;
  }
  .opaque {
      opacity: 1;
  }
  .font-large {
      font-size: 24pt
  }

A string value specifying the animation type.

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:

  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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4