[英]How to call a `callback` function after all `transition` done?
I would like to call my callback
after all my transition
end. 我希望在我的所有
transition
结束后调用我的callback
。 But I am getting no. 但我没有。 of time of callback from each of the
transition
end. 来自每个
transition
端的回调时间。 How to combine all this and make a call back at the end? 如何结合所有这些并在结束时回电?
Here is my code: 这是我的代码:
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();
I'm not sure if this is the best way to solve it, but it certainly works. 我不确定这是否是解决问题的最佳方法,但它肯定有效。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.