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

Question

I am not very well-versed in JS and could not understand how to apply similar answers to my question, so I would appreciate your help and advice.

What I'm Making: I am working on a webview pop-up. It has a close button at the bottom that I want to be animated the same as the in-app buttons.

How I'm Doing It: I am currently closing it simply with <a href="#" onclick="window.close(); return false;"><img class="button" src="img.png"></a>.

I have a webkit animation that changes on img.button:active mode.

My Issue: I want the transition to complete before the window closes. I know that I must use addEventListener to check when the transition has ended, but I cannot seem to do this correctly with window.close(). Is there a good way to do this?

I have not been able to figure this out by myself reading tons of documentation all day.

Gildas.Tambo · Answer 1 · 2015-02-05T07:40:55.033

The easiest way to achieve that is to add a class using Element.classList API when the user click on the anchor or the image then add EventTarget.addEventListener on that given class.

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>

score 0 · Answer 2 · answered Feb 05 '15 at 07:14

You can listen to the event transitionend that is triggered on the element img.button, which signals the end of a CSS transition. However, since browser support for transitionend is patchy (although all latest versions of Chrome, Firefox and Safari support transitionend natively without vendor prefixes), you should use this script to sniff out which event is actually supported.

With regards to the markup, I strongly suggest avoiding inline JS but set up an event listener instead.

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

My script also assumes that there might be multiple img.btn elements on the page, so we have got to loop through all elements that match the selector. If that is not the case, you can simply use document.querySelector and forgo the loop.

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

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

2 Answers2