完成所有`transition`之后如何調用`callback`函數？

Question

我希望在我的所有transition結束后調用我的callback 。 但我沒有。 來自每個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>