How do I call the callback function after the "transition" is complete?
I would call mine callback
after my end transition
. But I don't get it. callback time from each end transition
. How to combine all this and make a call 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();
+3
source to share
1 answer
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>
+2
source to share