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.

/

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/cGwb4/1/

• javascript
• css
• webkit-transform

• I checked it at jsfiddle/cGwb4/1 it working fine. – Rais Alam Commented Feb 27, 2013 at 4:01
• No you are true no alert is there let me try. – Rais Alam Commented Feb 27, 2013 at 4:06
• As jfreind00 said, you have to give it some transition: jsfiddle/cGwb4/4 – Passerby Commented Feb 27, 2013 at 4:14

1 Answer 1

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/jfriend00/75Mh2/ where I've added:

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