vue-img-fade

Vue Image Fade

One liner image fade plugin that adds transitions to images on load.

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="https://raw.githubusercontent.com/rumaan/vue-img-fade/HEAD/..." 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="https://raw.githubusercontent.com/rumaan/vue-img-fade/HEAD/..." alt="..." width="100" height="100">
    <img src="https://raw.githubusercontent.com/rumaan/vue-img-fade/HEAD/..." alt="..." width="100" height="100">
    <!-- ... -->
    <img src="https://raw.githubusercontent.com/rumaan/vue-img-fade/HEAD/..." alt="..." width="100" height="100">
  </div>
</template>

Custom Options

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

Demo

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

Development

Plugin

tsup is used to build the library.

yarn lib:build

Docs

yarn docs:dev

yarn docs:build