javascript - 如何使用 addEventListener(webkitTransitionEnd) 在 window.close() 之前延迟？

Question

我不太精通 JS，无法理解如何将类似的答案应用到我的问题中，因此非常感谢您的帮助和建议。

---

我在做什么:我正在处理 webview 弹出窗口。它底部有一个关闭按钮，我希望它的动画效果与应用程序内按钮相同。

我是怎么做到的:我目前只是用 <a href="#" onclick="window.close(); return false;"><img class="button" src="img.png"></a> 关闭它.

我有一个在 img.button:active 上变化的 webkit 动画模式。

我的问题:我希望在窗口关闭之前完成转换。我知道我必须使用 addEventListener检查转换何时结束，但我似乎无法使用 window.close() 正确执行此操作.有没有好的方法来做到这一点？

---

我自己一整天都在阅读大量文档，却无法弄清楚这一点。

Answer 1

您可以监听在元素 img.button 上触发的事件 transitionend，它表示 CSS 过渡结束。然而，由于浏览器对 transitionend 的支持是不完整的(尽管所有最新版本的 Chrome、Firefox 和 Safari 都原生支持 transitionend 而没有 vendor 前缀)，您应该 use this script嗅出实际支持的事件。

关于标记，我强烈建议避免使用内联 JS，而是设置一个事件监听器。

<a href="#" id="closeWindow"><img class="button" src="http://placehold.it/100x100" /></a>

我的脚本还假定页面上可能有多个 img.btn 元素，因此我们必须遍历与选择器匹配的所有元素。如果不是这种情况，您可以简单地使用 document.querySelector 并放弃循环。

// Determine which transntionend event is supported
function whichTransitionEvent() {
    var t,
        el = document.createElement("fakeelement");

    var transitions = {
        "transition"      : "transitionend",
        "OTransition"     : "oTransitionEnd",
        "MozTransition"   : "transitionend",
        "WebkitTransition": "webkitTransitionEnd"
    }

    for (t in transitions){
        if (el.style[t] !== undefined){
            return transitions[t];
        }
    }
}
var customTransitionEnd = whichTransitionEvent();

// Get button
var btns = document.querySelectorAll('img.btn:active'),
    i;

for (i = 0; i < btns.length; ++i) {
    btns[i].addEventListener(customTransitionEnd, function(e) {
        e.preventDefault();
        alert('Transition End');
        // window.close();
    });
}