애니메이션 페이드 아웃 후 div 제거 -

Question

애니메이션이 완료된 후 div를 제거하려고하는데 애니메이션의 첫 번째 반복 직후에 제거가 발생하는 것처럼 보입니다. 나는 child.remove() 호출을 제거하면 http://jsfiddle.net/ny85ckk2/이 애니메이션이 끝날 때까지 계속 다음은 jsfiddle

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

. 아이디어가 있으십니까?

덕분에 많은

Answer 1

귀하의 fadeOut는 비동기 작업입니다. 전화를 걸면 은으로 시작하지만, setTimeout을 사용하기 때문에 페이드는 계속되고 비동기식으로 완료됩니다. 따라서 전화 번호가 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