Как вызвать функцию callback после завершения «перехода»?

Question

Я хотел бы позвонить в мой callback в конце концов мой transition конец. Но я не получаю. времени обратного вызова от каждого конца transition. Как совместить все это и сделать звонок в конце?

Вот мой код:

var fadeHandler = function() { 
    var myCallback = function() { 
    $.event.trigger('showMenu'); 
    //this is called 6 times 
    // how to get single time call back after completing all 6 transitions? 
    } 

    d3.selectAll('.subAppGroup .subAppPath, .subAppGroup .subAppGroupDetail') //parent group 6 no.s 
    .transition() 
    .delay(function(d, i) { 
     return i * 500; 
    }) 
    .duration(500) 
    .style('opacity', 1) 
    .each("end", myCallback); //this is called 6 times 

} 
fadeHandler(); 

Answer 1

Я не уверен, если это лучший способ решить эту проблему, но это, безусловно, работает.

var fadeHandler = function() { 
 
    var items = d3.selectAll('.subAppGroup .subAppPath, .subAppGroup .subAppGroupDetail'), 
 
     todo = items.size(); 
 
    
 
    items 
 
    .transition() 
 
    .delay(function (d, i) { 
 
     return i * 500; 
 
    }) 
 
    .duration(500) 
 
    .style('opacity', 1) 
 
    .each("end", function() { 
 
     todo--; 
 
     if (todo === 0) { 
 
      // $.event.trigger('showMenu'); 
 
      $("#allDone").fadeIn(); 
 
     } 
 
    }); 
 
}; 
 

 
fadeHandler();

.subAppGroup * { 
 
    float: left; 
 
    width: 50px; 
 
    height: 50px; 
 
    opacity: 0.2; 
 
    margin: 4px; 
 
} 
 
.subAppPath { 
 
    background-color: red; 
 
} 
 
.subAppGroupDetail { 
 
    background-color: blue; 
 
} 
 
#allDone { 
 
    display: none; 
 
    clear: both; 
 
    margin: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<div class="subAppGroup"> 
 
    <div class="subAppPath"></div> 
 
    <div class="subAppGroupDetail"></div> 
 
    <div class="subAppPath"></div> 
 
    <div class="subAppGroupDetail"></div> 
 
    <div class="subAppPath"></div> 
 
    <div class="subAppGroupDetail"></div> 
 
</div> 
 
<div id="allDone">All done!</div>