延迟 javascript 函数直到 css 动画完成

Question

我正在尝试制作一个模态对象库，它将创建和打开一个类似于 colorbox 的 div、iframe、img。我是用纯 javascript 做的，所以请不要推荐 jQuery。

问题是，当用户使用 var myModal = new modal(options, width, height) 创建新模态时，我希望它检查模态是否已经存在，关闭它，等待关闭动画，然后继续创建新模式。我已经可以做任何事情，但是我有一个问题，等待创建新的模态，直到旧的模态消失。我知道 webkitTransitionEnd 和触发自定义事件，但这不是问题。我需要实际代码等待旧模式完成关闭，直到它继续完成函数的其余部分并仍将正确的对象返回给用户。以下是我尝试过的一些事情：

• 创建一个 transsionEnd 侦听器，等待动画结束，然后创建新的模态。（这行得通，但考虑到它变成了一个嵌套函数，很难返回正确的对象）。
• 使用 try, catch 块。（这对我的目的不起作用）
• 在我使用递归函数的地方使用相同事物的无数变体

如果有人有想法，请随时发布。我尝试了很多东西，但显然不是我需要做的一件事。谢谢。

编辑：

我能够弄清楚。我所要做的就是将一个 transitionEnd 侦听器附加到已经打开的模态，然后在类之外创建一个附加函数，然后使用相同的构造函数调用模态。代码看起来有点像这样：

function create(options, width, height) {
    return new modal(options, width, height);
}

function modal(options, width, height) {
    if (modal != null) {
        modal.close();
        modal.addEventListener('webkitTransitionEnd', function() {
            create(options,width,height);
        });
    }
    return;
}

Answer 1

您不能使代码等待（例如，暂停当前执行线程的执行）直到某个未来事件发生。JavaScript 根本不支持这种方式或以这种方式工作。除了几个模态函数（例如alert().

您可以做的是使用回调来通知未来事件的某些调用代码。但是，调用代码将注册其回调并立即返回并继续执行，因此必须编写调用代码来处理回调实现。

如果您想在图书馆内完成所有工作，那么事情应该不会那么困难。当调用者创建新模式时，您只需检查预先存在的模式对话框。如果没有启动，您可以照常进行。如果其中一个已启动，则您可以向前一个注册一个回调通知，存储构造函数的内容，但实际上并不创建新的模式对话框。然后，当您的回调被调用以指示先前的模式对话框已完成时，您就完成了新模式的设置。

如果这些模式对话框都是您自己创建的，那么您需要对它们实现完成通知，以便当它们关闭时，它们可以通知任何侦听器它们现在已完成。如果他们使用动画来关闭，并且您想等待关闭通知直到动画完成，那么您也可以实现它。如果您使用 CSS3 动画，那么您似乎已经知道，您可以使用 transtionEnd 事件来了解动画何时完成，或者您是否知道动画的时间，并且不需要精确到毫秒，您也可以只使用 asetTimeout()来了解动画何时完成。