Using transitionend correctly in order to run script once final CSS3 transition has completed?

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);

Getting rid of the ,false in your event binding seems to do the trick, but it looks like the event is fired 4 times for each image. — Shmiddty
– Shmiddty, Commented Nov 21, 2012 at 18:56
I noticed the same that it dispatches event four times per image. And as mentioned, "false" parameter is only used when using vanilla JS method elem.addEventListener(); — Samuli Hakoniemi
– Samuli Hakoniemi, Commented Nov 21, 2012 at 19:10

Inferpse · Accepted Answer · 2012-11-21 19:13:50Z

2

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.

answered Nov 21, 2012 at 19:13

Inferpse

4,1451 gold badge34 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

styler Over a year ago

hey what exactly does this line mean? if(!animCompleteImages.filter(this).length) { also you set animCompleteImages = $() is this just the same as = {}?

Inferpse Over a year ago

Imagine that animCompleteImages is collection of images which complete their animation. I've declared it as empty jQuery object, so I can check in the future that element is presented in collection using filter method. Using .add method is similar to array's push method. Yes, I could use empty array [] or an empty object {} but jQuery allows me to write less and do more.

Inferpse Over a year ago

So this string means "if not current element in collection".

Collectives™ on Stack Overflow

Using transitionend correctly in order to run script once final CSS3 transition has completed?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related