Animation Component

A wrapper component around Vue's <Transition> that provides multiple pre-defined animation effects for entering and leaving elements.

Props

Prop	Type	Default	Description
effect	String	"page"	The animation effect to apply (see list below)
mode	String	"out-in"	Transition mode (in-out, out-in, or default)

Supported Effects

You can use these values for the effect prop:

• page – Smooth scale-in/out animation
• bounce – Bounce effect on enter/leave
• zoom-in-out – Zoom in/out transition
• slide-left-to-right – Slide horizontally
• bounce-in-out – Bounce in/out animation
• up-down-effect – Slide up/down effect
• slide – Slide from left
• bottom – Slide from bottom
• top – Slide from top

Examples

Bounce Effect

<animation-effect effect="bounce">
  <p v-if="show">Hello with Bounce!</p>
</animation-effect>

Slide from Bottom

<animation-effect effect="bottom">
  <div v-if="show" class="card">I'm sliding from bottom</div>
</animation-effect>

Page Transition (Default)

<animation-effect>
  <section v-if="show">Default page transition effect</section>
</animation-effect>