如何使用addEventListener(webkitTransitionEnd）在window.close(）之前延迟

How to delay before window.close() with addEventListener(webkitTransitionEnd)?

本文关键字：close 延迟 window 何使用 webkitTransitionEnd addEventListener      更新时间：2023-09-26

我对JS不是很精通，也不知道如何将类似的答案应用于我的问题，所以我非常感谢您的帮助和建议。

我在做什么：我正在处理一个网络视图弹出窗口。它的底部有一个关闭按钮，我想像应用程序中的按钮一样设置动画。

我是如何做到的：我现在只是用<a href="#" onclick="window.close(); return false;"><img class="button" src="img.png"></a>来结束它。

我有一个在img.button:active模式下更改的webkit动画。

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

我一整天都在阅读大量的文件，却没能弄清楚这一点。

您可以监听在元素img.button上触发的事件transitionend，它表示CSS转换结束。然而，由于浏览器对transitionend的支持是不完整的（尽管所有最新版本的Chrome、Firefox和Safari本机都支持transitionend，没有供应商前缀），因此您应该使用此脚本来找出实际支持的事件。

关于标记，我强烈建议避免使用内联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();
    });
}

实现这一点的最简单方法是，当用户单击锚或图像时，使用Element.classList API添加一个类，然后在给定的类上添加EventTarget.addEventListener。

function closeWindow () {
    alert("actice: transition end you can call window.close() now");
    window.close();
}
function anchorActive (e) {
    e.preventDefault();
    imgButton.classList.add("active")
}
  var clickAnchor = document.querySelector("#clickAnchor"),
      imgButton = document.querySelector("img.button");
  clickAnchor.addEventListener("click", anchorActive, false);
  imgButton.addEventListener("transitionend", closeWindow, false);
img{
  opacity: 1; 
  transition: opacity 3s ease
}
img.active{opacity: .3}
<a id=clickAnchor href="#"><img class="button" src="http://placehold.it/150x150.png"></a>

相关文章：