Search code examples
javascriptcsswebkit-transform

webkitTransitionEnd not firing

I'm not sure what exactly happened, but I am pretty sure this was working at one point.

The event just isn't firing (or I am not catching it properly)

var $zoomBox = $('#zoomBox');
$zoomBox.bind('webkitTransitionEnd', function(e) {
    alert("test");
});
$('.button').click(function (e) {
    $zoomBox.css('-webkit-transform', 'matrix(2,1,1,2,300, 100)');
});

see fiddle below. After the box finishes transitioning, an alert should pop up, but the alert is not displaying.

http://jsfiddle.net/cGwb4/1/

Solution

  • There's no transition specified in the CSS, so you aren't getting a transition at all. You're just changing the CSS for which there is no webkitTransitionEnd event.

    See the fixed example here (in Chrome or Safari): http://jsfiddle.net/jfriend00/75Mh2/ where I've added:

    -webkit-transition: -webkit-transform 3s;