Javascript 如何使用addEventListener（WebKittTransitionEnd）延迟window.close（）之前的时间？

我不是很精通JS，不知道如何将类似的答案应用到我的问题中，因此我将感谢您的帮助和建议

---

我在做什么： 我正在制作一个网络视图弹出窗口。它在底部有一个关闭按钮，我希望它的动画效果与应用程序中的按钮相同

我是怎么做的： 我现在只是用

关闭它

我有一个webkit动画，在

img.按钮：active

模式下更改

我的问题： 我希望在窗口关闭之前完成转换。我知道我必须使用

addEventListener

检查转换何时结束，但我似乎无法使用

window.close（）

正确执行此操作。有什么好办法吗

---

---

我一整天都在阅读大量的文档，自己还没有弄明白这一点。

实现这一点的最简单方法是，当用户单击锚定或图像时添加一个类，然后添加到给定的类上

函数关闭窗口（）{
警报（“actice:transition-end，您现在可以调用window.close（））；
window.close（）；
}
功能锚定（e）{
e、 预防默认值（）；
imgButton.classList.add（“活动”）
}
var clickAnchor=document.querySelector（#clickAnchor”），
imgButton=document.querySelector（“img.button”）；
单击Anchor.addEventListener（“单击”，anchorActive，false）；
imgButton.addEventListener（“transitionend”，closeWindow，false）
img{
不透明度：1；
过渡：不透明度3秒轻松
}
img.active{opacity:.3}
您可以收听在元素
img.按钮上触发的事件
转换，该按钮表示CSS转换结束。但是，由于浏览器对
transitionend
的支持是不完整的（尽管所有最新版本的Chrome、Firefox和Safari都支持
transitionend
，本机没有供应商前缀），因此您应该找出实际支持的事件

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

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

// 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();
    });
}