如何修改 SweetAlert2 的 Toast 动画设置？

Question

我已经在我的 Web 应用程序中实现了 SweetAlert2 的 toast 通知，并使用 customClass 参数覆盖了动画，以允许我的 toast 通知从右侧滑入。但是，我似乎无法解决其他两个细节：

1. 如何加快通知动画的速度？通知从右侧开始滑入大约需要 2 秒。我想创造这个瞬间。我知道的唯一值是timer，它控制通知可见的时间。

2. 如何使我的 toast 通知滑入顶部导航栏的“下方”？有没有办法可以调整通知开始的顶部偏移量（或顶部边距）？例如，我可以将 toast 通知的顶部设置为特定值（比如屏幕顶部的100px）吗？

我当前的代码 sn-p 如下所示：

const toast = swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 10000,
    animation: false,
    customClass: 'animated slideInRight'
});

Answer 1

通过指定css，您可能需要根据您的项目进行一些调整。

对于您的第一个加速动画的问题，您可以在动画中添加：

.swal2-show {
  animation: swal2-show .5s !important; 
}

要修改您的模态，您可以修改：

.swal2-modal {
  background-color: rgba(63,255,106,0.69) !important;
  border: 3px solid white;
  position: relative !important;
  top: 100px !important;
}

例子：

swal('Custom animation speed')

.swal2-show {
  animation: swal2-show .5s !important; 
}
.swal2-modal {
  background-color: rgba(63,255,106,0.69) !important;
  border: 3px solid white;
  position: relative !important;
  top: 100px !important;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>

注意!important不应该被粗心使用，如果你知道直接选择器，最好指定而不是使用!important

更新Toast：你需要更改.swal2-popup.swal2-toast.swal2-show

.swal2-popup.swal2-toast.swal2-show {
  background-color: rgba(63,255,106,0.69) !important;
  border: 3px solid white;
  position: relative !important;
  top: 20px !important;
  -webkit-animation: swal2-show .5s !important;
  animation: swal2-show .5s !important;
}

Codepen