1

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

只要用户在两次<button>按下之间等待淡入淡出完成，这就会起作用。

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

我设法让它立即重新出现，但现在它不会再次消失。

要更轻松地了解我在做什么，请查看我设置的 JSFiddle 。

如果在已经淡出时单击，谁能帮我让它淡出？

我只针对。

<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;
}
4

1 回答 1

2

我更新了你的小提琴，将克隆移到顶部并清除超时。

// 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(/* */);
于 2013-07-29T02:33:21.317 回答