如何改变 vue-toasted 弹出的方向答案

【问题标题】：How to change vue-toasted pop-up direction如何改变 vue-toasted 弹出的方向
【发布时间】：2021-05-10 03:02:31
【问题描述】：

我正在使用 vue-toasted 来显示通知。

默认情况下，它会弹出到顶部。

代码：

<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',
},

吐司从顶部弹出。我尝试添加一些 CSS，例如 transition。我对CSS不熟悉，所以我猜是错的。

如何将其更改为从右到左？我在他们的GitHub 上找不到任何信息。

【问题讨论】：

position 选项不适用于您的问题？

标签： vue.js nuxt.js vue-toasted

【解决方案1】：

vue-toasted v1.1.27 仅支持动画upward 或downward。它没有用于添加新动画的 API。

【讨论】：

【解决方案2】：

我添加了一些@keyframes 和animation，它起作用了。

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

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

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

【讨论】：