@hz-libs/bpe-ui-shake-in

Shake-in animation primitive for Vue 3.

Docs

Install

pnpm add @hz-libs/bpe-ui-shake-in

The app must already depend on Vue ^3.5.0. Component CSS is included in the JavaScript import.

Use

The slot shakes when it mounts. Change the key to play the shake again.

<script setup>
import { ref } from 'vue'
import { ShakeInAnimation } from '@hz-libs/bpe-ui-shake-in'

const key = ref(0)
</script>

<template>
  <button type="button" @click="key += 1">Replay</button>
  <ShakeInAnimation :key="key">
    <span>Shake</span>
  </ShakeInAnimation>
</template>

Exports

ShakeInAnimation.