После сброса перехода div остается видимым; нет нового перехода

Question

Я пытаюсь сделать дисплей <div>, а затем исчезнуть, нажав кнопку.

Это работает, пока пользователь ждет завершения замирания между <button> прессами.

Моя проблема в том, если <button> щелкают в то время как увядание продолжается, <div> должен немедленно появиться, а затем постепенно исчезают.

Мне удалось получить его немедленно, но теперь он снова не исчезает.

Чтобы получить более легкое представление о том, что я делаю, посмотрите на the JSFiddle я установки.

Может ли кто-нибудь помочь мне получить это, чтобы исчезнуть, если щелкнуть, но уже исчезает?

Я ориентируюсь только на webkit.

<div id="saved">Saved!</div> 
<button id="save">Save</button> 

function save() 
{ 
    // Little "Saved!" div 
    var div = document.getElementById('saved'); 

    // If still showing from previous save 
    if(div.style.visibility === 'visible') 
    { 
     resetTransition(); 
     div.style.visibility = 'visible'; 
     //div.style.opacity = 0; 
     console.log('reset'); 
    } 

    // On transition end 
    div.addEventListener('webkitTransitionEnd', resetTransition); 

    function resetTransition() 
    { 
     // Disable transitions 
     div.className = 'notransition'; 

     // Hide the div and reset the opacity 
     div.style.visibility = 'hidden'; 
     div.style.opacity = 1; 

     // Need time to let CSS changes (^) refresh 
     setTimeout(function() 
     { 
      // Re-enable transitions 
      div.className = ''; 

      // Remove the event listener by way of cloning 
      var dolly = div.cloneNode(true); 
      div.parentNode.replaceChild(dolly, div); 
     }, 1); 
    } 

    // Show the div and fade out - on timer due to "if still showing" needing 
    // to process first 
    setTimeout(function() 
    { 
     div.style.visibility = 'visible'; 
     div.style.opacity = 0; 
    }, 1); 
} 

document.getElementById('save').addEventListener('click', save); 

div#saved 
{ 
    -webkit-transition: opacity 1.25s ease-out; 
    -webkit-transition-delay: 0.75s; 
    background-color: #FFC; 
    /* Courtesy of http://fatcow.com/free-icons */ 
    background-image: url('http://i.imgur.com/JMlclKE.png'); 
    background-position: 3px 4px; 
    background-repeat: no-repeat; 
    border: 1px solid #333; 
    border-radius: 6px; 
    left: 5px; 
    opacity: 1; 
    padding: 10px 4px 10px 52px; 
    position: absolute; 
    top: 5px; 
    visibility: hidden; 
    width: 68px; 
} 

.notransition 
{ 
    -webkit-transition: none !important; 
    -webkit-transition-delay: none !important; 
} 

button 
{ 
    position: absolute; 
    top: 100px; 
} 

Answer 1

Я обновил свой fiddle, перемещая клонированию к верхней и очищая тайм-аут.

// Little "Saved!" div 
clearTimeout(save.t); 
var dolly = document.getElementById('saved'); 
// Remove the event listener by way of cloning 
var div = dolly.cloneNode(true); 
dolly.parentNode.replaceChild(div, dolly); 

/* etc til */ 
save.t = setTimeout(/* */);