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 に答える