Button Hover Pulse Effect

Enhance interactive buttons with a subtle pulse effect on hover, illustrating the use of Vue's <Transition> in conjunction with CSS transitions.

<template>
  <div>
    <button @mouseover="startPulse" @mouseleave="stopPulse" :class="{pulsing: isPulsing}">Hover me!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPulsing: false
    };
  },
  methods: {
    startPulse() {
      this.isPulsing = true;
    },
    stopPulse() {
      this.isPulsing = false;
    }
  }
};
</script>

<style>
button {
  /* Button styling */
}
button.pulsing {
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
</style>

Vue component template with a button element. The script part of the component defines a boolean data property 'isPulsing' and methods to toggle its state. The CSS part defines the pulse animation tied to the 'pulsing' class.