Animations and Transitions

Notivue lets you customize both animations (played on creation and dismissal) and transitions (applied on repositioning).

Animations (enter, leave, clearAll)

First of all, remove the following import as you won't need it anymore:

Vite - main.js

import 'notivue/notification.css'
import 'notivue/animations.css'

Nuxt - nuxt.config.ts

export default defineNuxtConfig({
  modules: ['notivue/nuxt'],
  css: [
    'notivue/notification.css',
    'notivue/animations.css'
  ]
})

Then, update the animations property of the notivue config by specifying a custom class for each animation:

Vite - main.js

const notivue = createNotivue({
  animations: {
    enter: 'pop-in',
    leave: 'pop-out',
    clearAll: 'fade'
  }
})

Nuxt - nuxt.config.ts

export default defineNuxtConfig({
  modules: ['notivue/nuxt'],
  notivue: {
    animations: {
      enter: 'pop-in',
      leave: 'pop-out',
      clearAll: 'fade'
    }
  }
})

Finally, define the classes somewhere in your CSS:

.pop-in {
  animation: pop-in-kf 200ms ease-in-out;
}

.pop-out {
  animation: pop-out-kf 300ms ease-out;
}

.fade {
  animation: fade-kf 1s ease-in-out;
}

@keyframes pop-in-kf {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pop-out-kf {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.05);
    opacity: 0;
  }
}

@keyframes fade-kf {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Transitions (transform)

When using custom animations, you probably also want to customize the transition used by Notivue when appling the transform property to reposition the notifications.

Usually, but not necessarily, you would apply the same duration and easing of the enter animation to keep the repositioning experience consistent:

Vite - main.js

const notivue = createNotivue({
  transition: 'transform 200ms ease-in-out'
  // ...
})

Nuxt - nuxt.config.ts

export default defineNuxtConfig({
  modules: ['notivue/nuxt'],
  notivue: {
    transition: 'transform 200ms ease-in-out'
    // ...
  }
})

.pop-in {
  animation: pop-in-kf 200ms ease-in-out;
}

Important

• The transform property should always be present and be the only transition-property defined.

• You can use any transition duration and easing but it is recommended to use the same values as your enter animation if you're not excatly sure what to set.

Disabling animations and transitions globally

Animations and transitions are automatically disabled if users prefer reduced motion.

To disable them globally, simply pass an empty string to each animation class name and none to the transition config property:

Vite - main.js

const notivue = createNotivue({
  transition: 'none',
  animations: {
    enter: '',
    leave: '',
    clearAll: ''
  }
})

Nuxt - nuxt.config.ts

export default defineNuxtConfig({
  modules: ['notivue/nuxt'],
  transition: 'none',
  notivue: {
    animations: {
      enter: '',
      leave: '',
      clearAll: ''
    }
  }
})