Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Trigger Transition Programmatically

Vue Tip: Trigger Transition Programmatically Image
ScriptAnimations

Vue transitions are used to apply animations when an element or component is entering and leaving the DOM. These animations are triggered by:

  • Conditional rendering via v-if
  • Conditional display via v-show
  • Dynamic components toggling via the <component> special element
  • Changing the special key attribute

The key attribute is handy if you need to trigger your transition programmatically. One use case for programmatically triggering Vue transitions is in form validation. By dynamically triggering transitions based on the validity of form inputs, users can receive visual feedback in real-time, enhancing the overall user experience and guiding them through the form submission process with clarity and ease.

Example Code

Let's take a look at a simple example of how to trigger a transition programmatically:

Component.vue
<script setup lang="ts"> import { ref } from 'vue'; const show = ref(false); const animationTrigger = ref(0); </script> <template> <div class="container"> <Transition name="slide-fade"> <p v-if="show" :key="animationTrigger">Hi</p> </Transition> <button @click="show = !show">Toggle</button> <button @click="animationTrigger += 1"> Re-trigger animation ({{ animationTrigger }}) </button> </div> </template>

StackBlitz

Try it yourself in the following StackBlitz:

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.

Vue Tip: Passing Slots to Child Components

In certain scenarios, you need to pass on all slots from a parent component to the child component.

Vue Tip: Don't Use Reactive Object for Template Refs

Template Refs are a way to access elements in the DOM from within a Vue component. As the name suggests, you should use a ref to access the element in the template.