关闭模态时如何在甜蜜警报 2 中应用动画?

Question

>有谁知道如何在关闭时将动画应用于甜蜜警报 2？看来function(dismiss)似乎没有解决问题。

$.ajax({
method:'POST',
url:'sql/record.php',
data:formData,
contentType: false,
processData: false,
success: function(response){
swal({
title: 'Success!',
text: "New record has successfully added.",
type: 'success',
animation: false,
customClass: 'animated tada',
showCancelButton: false,
confirmButtonText: 'OK'
}).then(function(result){
}, function(dismiss){
swal({customClass: 'animated bounceOut'});
}
});
);

Answer 1

我知道这是一个老问题，但也许有人仍在寻找答案(就像我一样(。

我设法将动画应用于关闭和确认 swal2。此方法不适用于在 swal 外部单击以将其关闭。

swal({
title: 'swal title',
html: 'some content',
showLoaderOnConfirm: true,
animation: false,
customClass: "animated fadeInLeft",
onClose: function(){
return delaySwalWithAnimation("fadeInLeft","fadeOutRight");
},
preConfirm: function(){
return delaySwalWithAnimation("fadeInLeft","fadeOutRight");
}
}).then(function(result) {
//...
}
function delaySwalWithAnimation(animationToRemove, animationToAdd){
return new Promise(function(resolve) {
$(".swal2-popup").removeClass(animationToRemove);
$(".swal2-popup").addClass(animationToAdd);
setTimeout(function() {
resolve();
},300);
});
}

Answer 2

您应该添加一个名为onClose的属性。试试这个：

$.ajax({
method:'POST',
url:'sql/record.php',
data:formData,
contentType: false,
processData: false,
success: function(response){
swal({
title: 'Success!',
text: "New record has successfully added.",
type: 'success',
animation: false,
customClass: 'animated tada',
showCancelButton: false,
confirmButtonText: 'OK',
onClose: function(modal) {
modal.className += ' animated bounceOut';
}
})
});
);