Question

我正在尝试在动画完成后从正文中删除div，但此时看起来就像在动画的第一次迭代后立即发生删除。

function $(el) { return document.getElementById(el); }

var divFirst = $('first');
if(divFirst)
    divFirst.addEventListener("click", addSecond);

function removeSecond()
{
    fadeOut();
    var child = $('second');
    console.log("remove called");
    child.remove();
}

function addSecond()
{
    console.log("addSecond called");
    var aContainer = document.createElement('div');
    aContainer.setAttribute('id', 'second');
    aContainer.innerHTML = "Second";
    aContainer.addEventListener("click", removeSecond);
    document.body.appendChild(aContainer);
    fadeIn();
}

function fadeIn()
{
    var secondDiv = $('second');
    if(secondDiv)
    {
        secondDiv.style.opacity ? secondDiv.style.opacity : 
            secondDiv.style.opacity = "0.0";
        if(parseFloat(secondDiv.style.opacity) <= 1)
        {
            secondDiv.style.opacity = parseFloat(secondDiv.style.opacity) + 0.05;
            setTimeout(fadeIn, 50);
        }
    }
}

function fadeOut()
{
    var secondDiv = $('second');
    if(secondDiv)
    {
        console.log(secondDiv.style.opacity);
        if(parseFloat(secondDiv.style.opacity) >0 )
        {
            secondDiv.style.opacity = parseFloat(secondDiv.style.opacity) - 0.05;
            setTimeout(fadeOut, 50);
        }
    }
}

这里是jsfiddle：http://jsfiddle.net/ny85ckk2/ 如果我删除了child.remove（）调用，动画会一直持续到结束。有什么想法吗？

非常感谢

Answer 1

您的fadeOut是异步操作。当您调用它时，它启动淡入淡出，但随后淡入淡出继续并异步完成，因为您正在使用setTimeout。因此，callilng fadeOut之后的代码会在启动后运行。

要在完成后移除元素，请删除该代码，然后在完成后删除fadeOut中的元素：

function fadeOut()
{
    var secondDiv = $('second');
    if(secondDiv)
    {
        console.log(secondDiv.style.opacity);
        if(parseFloat(secondDiv.style.opacity) >0 )
        {
            secondDiv.style.opacity = parseFloat(secondDiv.style.opacity) - 0.05;
            setTimeout(fadeOut, 50);
        }
        else                         // Added
        {                            // Added
            secondDiv.remove();      // Added
        }                            // Added
    }
}

或者如果你想要更多的灵活性，让fadeOut在完成时调用回调并删除回调中的元素;我们通过将淡入淡出的实际工作与开始分开来实现：

function fadeOut(callback)
{
    var secondDiv = $('second');
    if (secondDiv)
    {
        doFade();
    }

    function doFade() {
        if(parseFloat(secondDiv.style.opacity) >0 )
        {
            secondDiv.style.opacity = parseFloat(secondDiv.style.opacity) - 0.05;
            setTimeout(doFade, 50);
        }
        else if (callback)
        {
            callback(secondDiv);
        }
    }
}

用法：

function removeSecond()
{
    fadeOut(function(div) {
        div.remove();
    });
}

Fiddle

淡出动画后删除div - javascript

1 个答案: