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

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

＆＃13;

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);

＆＃13;

img{
  opacity: 1; 
  transition: opacity 3s ease
}
img.active{opacity: .3}

＆＃13;

<a id=clickAnchor href="#"><img class="button" src="http://placehold.it/150x150.png"></a>

＆＃13;

Answer 2

您可以收听在元素transitionend上触发的事件img.button，该信号表示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();
    });
}

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

2 个答案: