3

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

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

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

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

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

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

4

2 回答 2

0

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

于 2015-02-05T07:12:55.707 回答
0

您可以侦听transitionend在 element 上触发的事件，该事件表示img.buttonCSS 转换的结束。但是，由于浏览器对 的支持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();
    });
}
于 2015-02-05T07:14:56.653 回答