小编Roo*_*777的帖子

我正在尝试制作一个模态对象库，它将创建和打开一个类似于 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;
}