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

【问题标题】：How to delay before window.close() with addEventListener(webkitTransitionEnd)?如何使用 addEventListener(webkitTransitionEnd) 在 window.close() 之前延迟？
【发布时间】：2015-04-04 22:49:55
【问题描述】：

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

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

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

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

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

我整天阅读大量文档都无法弄清楚这一点。

【问题讨论】：

标签： javascript html css addeventlistener webkit-animation

【解决方案1】：

您可以收听在元素 img.button 上触发的事件 transitionend，它表示 CSS 转换的结束。但是，由于浏览器对 transitionend 的支持不完整（尽管所有最新版本的 Chrome、Firefox 和 Safari 都原生支持 transitionend，但没有供应商前缀），您应该通过 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();
    });
}

【讨论】：

【解决方案2】：

实现这一点的最简单方法是在用户单击锚点或图像时使用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}

&lt;a id=clickAnchor href="#"&gt;&lt;img class="button" src="http://placehold.it/150x150.png"&gt;&lt;/a&gt;

【讨论】：