Bug 20132 – CSS animation doesn't work with onclick="this.className='newClassName'" anymore

• Status: RESOLVED
• Resolution: INVALID
• Component: CSS

[Tomomi]

On the current WebKit nightly (r35249), css animation doesn't work when swapping class names with oncick event handler attributes like, using this.className='newClassName'.

The className swap was working perfectly on r35231. 

Changing the values of style object properties, instead, as onclick="this.style.opacity='0'" works fine.

Please see the sample file on:
http://girliemac.com/iphone/anim_bug.html

thanks !

[Dave Hyatt]

This is INVALID.

For a brief period in the nightlies we tried out a "source transition" model, i.e., having the transitions in the "before style" determine how you transition.  However, Safari 3.1 (and current nightlies) use a "destination transition" model, i.e., having the transitions in the "after style" determine how you transition.

Your example has the transitions defined only for one class and not for the other.  Therefore in one direction the transition isn't going to apply.  If you want the transition to apply in both directions, move it into a more global rule that will stay in effect for both class names.  If you really did want the transition to only be one-way, then move the transition rules into the other class name rule.

We plan to clarify this in the spec.  The destination model makes more sense mainly because it allows authors to set new transitions and a new destination value using .style in JS and then have the transition go.  A source model would not allow this and would force you to use setTimeout hacks.