css 如何修改SweetAlert2的吐司动画设置?

li9yvcax  于 2023-01-10  发布在  其他
关注(0)|答案(2)|浏览(190)

我已经在Web应用程序中实现了SweetAlert2的吐司通知,并使用customClass参数覆盖了动画,以允许toast通知从右侧滑入。但是,我似乎无法解决另外两个细节:
1.如何加快通知动画的速度?通知从右侧开始滑入大约需要2秒。我希望设置为这一瞬间。我知道的唯一值是timer,它控制通知的可见时间。
1.如何让我的吐司通知滑入顶部导航栏的“下方”?是否有方法可以调整通知起始位置的顶部偏移量(或顶部边距)?例如,我是否可以将toast通知的顶部设置为特定值(例如从屏幕顶部开始的100px)?
我当前的代码片段如下所示:

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

1u4esq0p1#

通过指定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;
}

示例:
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
请注意,不应随意使用!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

aydmsdu9

aydmsdu92#

您可以尝试使用以下代码修改弹出窗口的属性:

Swal.fire({
      icon: "success",
      title: "Success title!",
      text: "Success Body",
      toast: true,
      position: "top-right",
      showClass: {
        popup: "animate__animated animate__bounceInRight",
      },
      hideClass: {
        popup: "animate__animated animate__bounceOutRight",
      },
    });

在showClass和hideClass中,可以为popup属性提供一个自定义CSS来控制吐司的动画。
这对我很有效。

相关问题