重置转换后，div保持可见;没有新的过渡

Question

我正在尝试显示<div>，然后在按钮单击时淡出。

只要用户在<button>按压之间等待淡入淡出完成，这种方法就可以工作。

我的问题是，如果在淡入淡出过程中单击<button>，则<div>需要立即重新出现，然后淡出。

我设法让它立即重现，但现在它并没有再次消失。

要更清楚地了解我正在做什么，请查看我设置的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(/* */);