Question

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

如何加快通知动画的速度？通知大约需要2秒钟才能从右侧开始滑动。我想让这一刻。我知道的唯一值是timer，它控制通知可见的时间。
如何在顶部导航栏中的“下方”制作吐司通知幻灯片？有什么方法可以调整通知起始位置的最高偏移量（或最高边距）？因此，例如，我可以将吐司通知的顶部设置为特定值（例如，从屏幕顶部的100px）吗？

我当前的代码段如下：

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

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

1 个答案: