Define a custom enter and exit animation

Define a custom enter and exit animation

You can write your own using the power of css or use any css animation library like animate.css.

All you need to do is to define your enter and exit classes.

const customAnimation = {
  enter: "animate__animated animate__lightSpeedInRight",
  exit: "animate__animated animate__lightSpeedOutRight",
  // appendPosition: true, // default to false
} as CSSTransitionProps;

// TIPS !!!!!!!!!!!!!!!!
// if add prop --> appendPosition: true
// - className to be: "animate__animated animate__lightSpeedInRight--top-right"
// - enter or exit animation will not trigger,
// - because there has no className "animate__lightSpeedInRight--top-right"
// - so, make sure "animate__lightSpeedInRight--top-right" is enable

TIP

Don't forget to add the position as well when you write your css animations. If you pass multiple classes, the position will be appended only to the last one.

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

Prevent the toast from collapsing after the exit animation

By default, the remaining toast will collapse smoothly

This can be disabled as well:

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

Tweak collapse duration

The default duration is 300ms. This is also easy to change 💪

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox