Question

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

只要用户等待<button>按下之间完成淡入淡出，这就有效。

我的问题是，如果{/ 1>}点击了，而淡入淡出正在进行，则<button>需要立即重新出现，然后淡出。

我设法让它立即重新出现，但现在它不再淡出。

为了更清楚地了解我正在做的事情，请查看我已设置的 the JSFiddle 。

任何人都可以帮我解决这个问题，如果点击的话已经逐渐消失了吗？

我只定位webkit。

<div>

<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);

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

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

1 个答案: