Button effects

[StevenJPx2]

Already demonstrated in app.vue, button effects can be created by using useGenericTransition or even useBakedTransition.

Example

<script lang="ts" setup>
const stingEffectContainer = ref<HTMLDivElement | null>(null);

const { play, stop } = useBakedTransition({
  parentContainer: stingEffectContainer,
  animationOptions: {
    translate: true,
    scale: "in",
    skew: "bottom",
  },
});
</script>

<template>
    <button
      @mouseover="
        stop();
        play();
      "
      @mouseout="
        stop();
        play();
      "
    >
      <div
        ref="stingEffectContainer"
      />
      <span class="inline-block text-white z-[1] pointer-events-none">
        hover over me!
      </span>
    </button>
</template>

The stop(); play(); mechanism is what will make it work well.