# Examples

In this section there are some usage examples to show the plugin functionalities. In all the examples is used the generic animation component because is always registered but you can also use the generated named functional components based on animate.css animation names.

# Simple animation

Animate both enter and leave state of any element.

<Animated name="bounce">
  <div v-if="show"></div>
</Animated>

# Enter and Leave

Use a different animation for enter and leave states.

<Animated enter="bounce" leave="hinge">
  <div v-if="show"></div>
</Animated>

# Animation duration

You can also customize the duration as you would with the transition component.

<Animated name="jello" duration="2000">
  <div v-if="show"></div>
</Animated>

You can also specify separate values for enter and leave durations.

<Animated name="jello" :duration="{ enter: 1000, leave: 0 }">
  <div v-if="show"></div>
</Animated>

# Transition modes

The mode property is supported as in a normal transition component, by default is "out-in"

<Animated leave="fadeOut" :mode="mode">
  <div v-key="toggler"></div>
</Animated>