淡出动画后删除div - javascript

Question

我想从动画中删除一个动画完成后的动画，但目前看起来像在动画第一次迭代之后发生删除动作。

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