你能在甜蜜警报 2 上删除模态之间的“闪光动画”吗答案

【问题标题】：Can you remove the 'flash animation' between modals on sweet alert 2你能在甜蜜警报 2 上删除模态之间的“闪光动画”吗
【发布时间】：2021-01-21 19:41:44
【问题描述】：

我正在使用甜蜜警报 2 将模态链接在一起。

我希望尽可能无缝地在模态之间进行过渡（使用 hideClass 和 showClass 删除动画。但是，当在模态之间按下继续时，仍然有一个非常明显的“闪烁”或闪烁。

这是我所拥有的：

Swal.mixin({
  confirmButtonText: 'Continue',
  confirmButtonColor: '#04D4CD',
})
  .queue([
  {
    title: 'Welcome to blah blah!',
    text: 'To get started we\'ll need some information from you',
    imageUrl: 'https://unsplash.it/400/200',
    imageWidth: 400,
    imageHeight: 200,
    hideClass: {
    popup: '',
    icon: '',  
    },
  },
  {
   title: 'Question 2', 
   text: 'More text is here.',
   imageUrl: 'https://unsplash.it/400/200',
   imageWidth: 400,
   imageHeight: 200,
   showClass: {
    popup: '',
    icon: '', 
  },
  hideClass: {
    popup: '',
    backdrop:'',
    icon: '',
  },
  },
  {
   title: 'Question 3', 
   text: 'Thats it!', 
   imageUrl: 'https://unsplash.it/400/200',
   imageWidth: 400,
   imageHeight: 200, 
   confirmButtonText: 'Get Started',
   showClass: {
   popup: '',
   icon: '',  
  }, 
  }
])

还有一个可以看到闪光灯的代码笔 - https://codepen.io/matt-tailwise/pen/vYXMVGJ。

有没有办法去掉这个？

感谢您的帮助！

【问题讨论】：

标签： javascript sweetalert sweetalert2

【解决方案1】：

您用于配置的键（显示/隐藏弹出窗口时的动画 CSS 类）sweetalert 为空。删除 hideclass 和 showclass。删除：

showClass: {
   popup: '',
   icon: '',  
},

和

hideClass: {
    popup: '',
    backdrop:'',
    icon: '',
},

【讨论】：

感谢您的回复。我正在使用它们来防止第二和第三模式的“弹出”效果（即它看起来对用户来说实际上只是 1 模式和 3 个屏幕）。

【解决方案2】：

在版本 11 中，我发现这很有用： Disabling Backdrop Animation - StackOverflow

该链接回答了如何完全禁用动画，因此我发现它解决了闪烁的背景问题。

 showClass: {
    backdrop: 'swal2-noanimation', // disable backdrop animation
    popup: '',                     // disable popup animation
    icon: ''                       // disable icon animation
  },
 hideClass: {
    backdrop: 'swal2-noanimation', // disable backdrop animation
    popup: '',                     // disable popup animation
    icon: ''                       // disable icon animation
  },

另外值得注意的是，在版本 11 中，队列已被弃用，取而代之的是“async & await”链式警报对话框。

【讨论】：