Vue Image Fade

Vue-image-fade is a one liner image fade plugin that adds transitions to images on load.

Demo

https://vue-img-fade.vercel.app/demo/using-v-fade.html

Docs

https://vue-img-fade.vercel.app

Features

  • Lightweight ~1kB gzip
  • Typescript + Vite
  • Simple One-Liner Directive
  • Web Animations API for customizing timelines

Installation and Usage

yarn add vue-img-fade

v-fade:

<script setup lang="ts">
import { vFade } from "vue-img-fade";
</script>
<template>
  <div>
    <img v-fade src="..." alt="..." width="100" height="100">
  </div>
</template>

v-fade-auto:

<script setup lang="ts">
import { vFadeAuto } from "vue-img-fade";
</script>
<template>
  <div v-fade-auto>
    <!-- width/height is required for v-fade-auto to work correctly -->
    <img src="..." alt="..." width="100" height="100">
    <img src="..." alt="..." width="100" height="100">
    <!-- ... -->
    <img src="..." alt="..." width="100" height="100">
  </div>
</template>

Custom Options

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

Development

Plugin

tsup is used to build the library.

yarn lib:build

Docs

yarn docs:dev

yarn docs:build