javascript - `callback` 完成后如何调用 `transition` 函数？

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>