重置過渡後，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(/* */);