求解决JQuery UI Dialog自定义CSS动画关闭时无法反向生效问题

嗨，我来帮你搞定这个问题！其实核心原因是jQuery UI Dialog默认的关闭逻辑不会触发自定义动画的反向效果——它要么直接把对话框设为display:none，要么直接移除元素，根本没给动画留执行的时间。我们需要手动拦截关闭事件，先播放反向动画，等动画结束后再真正关闭对话框。

下面是具体的解决方案，分步骤来：

1. 调整对话框初始化代码，拦截关闭事件 #

我们需要在初始化时添加close事件处理，阻止默认关闭行为，手动触发反向动画：

$(".ui-dialog-content").dialog({
  dialogClass: "uk-animation-slide-top-medium",
  autoOpen: false,
  resizable: false,
  open: function(event, ui) {
    // 每次打开时重新添加动画类，确保重复打开都能触发动画
    $(this).closest(".ui-dialog").addClass("uk-animation-slide-top-medium");
  },
  close: function(event, ui) {
    // 阻止默认的立即关闭行为
    event.preventDefault();
    const $dialogContainer = $(this).closest(".ui-dialog");
    
    // 移除打开动画类，添加关闭的反向动画类
    $dialogContainer.removeClass("uk-animation-slide-top-medium")
                   .addClass("uk-animation-slide-bottom-medium");
    
    // 监听动画结束事件，动画完成后再真正关闭对话框
    $dialogContainer.one("animationend", function() {
      // 如果你需要复用对话框，用`dialog("close")`隐藏即可；如果不需要，用`destroy()`销毁
      $(this).dialog("close");
      // 移除关闭动画类，避免下次打开时冲突
      $(this).removeClass("uk-animation-slide-bottom-medium");
    });
  }
});

2. 补充反向动画的CSS（如果UIkit没有现成的） #

如果UIkit没有提供对应的反向下滑动画类，你可以自己定义CSS动画：

/* 打开时的动画（如果UIkit的类不够用可以自己补） */
.uk-animation-slide-top-medium {
  animation: slideTopIn 0.3s ease-out forwards;
  opacity: 0;
}

/* 关闭时的反向动画 */
.uk-animation-slide-bottom-medium {
  animation: slideTopOut 0.3s ease-in forwards;
}

@keyframes slideTopIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideTopOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

3. 关键注意点 #

• 用one("animationend")而不是on，确保动画结束事件只触发一次，避免重复绑定导致的异常
• 如果需要重复打开对话框，记得在open事件里重新添加打开动画类，因为关闭时我们移除了它
• 动画类要加在对话框的容器（.ui-dialog）上，而不是内容元素（.ui-dialog-content），因为jQuery UI的对话框结构是外层容器包裹内容，动画需要作用在整个对话框上

内容的提问来源于stack exchange，提问作者Grufas