API Reference

`v-fade`

Use this directive directly on an img element to apply transition on load.

Directive Options:

export type Options = {
  keyframes?: Keyframe[];
  animationOptions?: KeyframeOptions;
};

Types:

Keyframes: Default Keyframe type from Web Animations API.

KeyframeOptions:

export type KeyframeOptions = KeyframeAnimationOptions & {
  /**
   * Amount of time in milliseconds to wait until all images visible in viewport have finished loading when using `v-fade-auto`
   * @default 4000
   */
  animationTimeout?: number;
  /**
   * Use this function to create custom delay for individual img items when using `v-fade-auto`
   * @param itemIndex Index of the img element
   * @returns Computed delay for animation
   */
  itemDelayFn?: (itemIndex: number) => number;
};

KeyframeAnimationOptions: Keyframe timing and attributes from Web Animations API.

Usage:

vue

<template>
  <img v-fade="{ keyframes, animationOptions }" />
</template>

See demo.

`v-fade-auto`

Use this directive on a parent element that has multiple child img elements. This directive waits for all the images visible in the viewport to load and runs the animation.

NOTE

This directive requires each child image element to have width and height properties to be explicitly set for it to work properly.