Animations and Transitions

Notivue allows to customize both animations (played on creation and dismissal) and transitions (applied on repositioning).

Custom Animations (enter, leave, clearAll)

First of all, remove the following import:

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 name 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 customizing animations, you probably also want to customize the transition used by Notivue when updating the transform property to move 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 entirely 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: ''
    }
  }
})