淡出動畫後刪除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