Question

I’m trying to learn how transitionend is used with my CSS3 transitions so I have a set of images that are sized into a grid as well as the opacity changed from 0 – 1, ideally what I want to do is wait until all those images have finished and the final transitionend event has fired off before carrying on with my next code. At the moment I’m simply trying to log out a message when transitionend fires but I’m getting nothing which means I’m probably using this wrong. Can anyone advise how I could do this?

JS Fiddle: http://jsfiddle.net/mWE9W/2/

CSS

.image img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.01;
  -webkit-transition: all 1s ease-in;
  -webkit-transform: scale(0);
  height: 150px;
  width: 150px;
  display:block;
}

.inner.active .image img {
  -webkit-transform: scale(1);
  top: 0;
  left: 0;
  opacity: 1;
}

JS

$('.image img').on('webkitTransitionEnd', function(e) {
  console.log('this ran')

  $('h2').fadeIn();
}, false);

Answer 1

1) You don’t need last argument false in .on method call. Your callback never called because of that.

2) Once you’ll remove that unneeded argument you’ll notice that callback is actually called 16 times. This happens because you have 4 images with 4 transition proporties. Animating each property causes callback to be called. So you need to make some sort of check that image transition is complete, and only after all transitions are done call your .fadeIn() method. The code will look like following:

var imageCount = $('.image img').length, animatedCount = 0, animCompleteImages = $();
$('img').imagesLoaded(function() {
    $('.inner').addClass('active').on('webkitTransitionEnd', 'img', function(e) {
        if(!animCompleteImages.filter(this).length) {
            animCompleteImages = animCompleteImages.add(this);
            animatedCount++;

            if(animatedCount === imageCount) {
                $('h2').fadeIn();      
            }
        }
    });
});​

Working JS fiddle available here.