How to change vue-toasted pop-up direction

Question

I'm using vue-toasted to show notifaction.

By default, it pops down to top.

Code:

<v-btn @click="onTest" />
...

onTest() {
  this.$toast.info('Test!', {
    containerClass: 'toasted-container',
    className: 'toasted',
    keepOnHover: true,
  })
},

nuxt.config.js:

toast: {
  duration: 3800,
  action: {
    icon: 'mdi-close-circle',
    onClick: (e, toastObject) => {
      toastObject.goAway(0)
    },
  },
  iconPack: 'mdi',
  icon: 'mdi-check-circle',
},

The toast pops down to top. I tried to add some css like transition. I'm not familiar with CSS, so I guess it's wrong.

How can I change it to right to left? I couldn't find any info on their GitHub.

Answer 1

I added some @keyframes and animation, it worked.

@keyframes in {
  0% {
    opacity: 0;
    left: 100%
  }

  100% {
    opacity: 1;
    left: 0%
  }
}

.some-class{
  animation: in 300ms;
}

Answer 2

vue-toasted v1.1.27 only supports animating upward or downward. It has no API to add new animations.