transitionend event not fired when there are multiple transitions




CSS Parsing and Computation
7 years ago
a year ago


(Reporter: Hongli Lai, Unassigned)


2.0 Branch
Mac OS X

Firefox Tracking Flags

(Not tracked)





7 years ago
User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.205 Safari/534.16
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0) Gecko/20100101 Firefox/4.0

I have a test case here:
This test case uses AJAX so it should be put on a web server.

This test case was an exercise for me in Spine.js and CSS transformations. The
idea is that if you click on any of the navigation links on top, it'll load the
target using Ajax and show a smooth transition animation ala iPhone before
displaying the new content.

If you open index.html and click on "book.txt", MainController.showNewContent()
will be called which executes two animations using $.fn.transition() which in turn uses CSS transitions and CSS transformations. One moves
the old content pane to the left until it's no longer visible, the other one
moves the new content pane to the center, to the place where the old content
pane was. This test case works perfectly on Chrome, Safari and Opera, but on
Firefox 4.0 the first click doesn't work properly because the transitionend
event isn't fired. The second click works, but the third one doesn't, etc.

Reproducible: Always
Component: General → Style System (CSS)
Product: Firefox → Core
QA Contact: general → style-system
Version: unspecified → 2.0 Branch

Comment 1

5 years ago
This might be a simpler test case: See discussion at SO:

Comment 2

a year ago
I have opened the simplest test case for this, and am EAGERLY anticipating a fix.

what is the work status on this one?
You need to log in before you can comment on or make changes to this bug.