More Update on CSS Animation
OK, so now I am trying to clarify how to make the css animation works using class name swap.
The conclusion is that it does work! – but you need to apply the -webkit-transition to “destination” class not the “origin” as I first attempted. Thanks for Dave and Dean from Apple, who pointed it out.
HTML Markup used for these examles (from Apple’s doc):
<div class="box"
style="width:100px;
height:100px;
background-color:blue;"
onclick="this.className = 'boxFade'">
Tap to fade
</div>
What *Not* To Do
This worked on some older WebKit nightly builds, but not on the latest build.
The reason is the -webkit-transition properties into the newClassName definition.
/* *** This is a bad example *** */
div.box { /* this applies only to the 'before' transition state */
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
}
div.boxFade {
opacity:0;
}
Click the box. On clicking event, the box’s opacity turns 0 immediately because the transition properties are not set for the “after” state.
What To Do – 1
This is the actual example snippet from Apple’s documentation, Safari CSS Animation Guide for iPhone OS page 13-14.
The reason this example works is that the -webkit-transition properties are defined in a generic <div> tag, not in a specified class that applied only for “before” state.
div { /* this applies for both 'before' and 'after' states */
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
}
div.fadeAway {
opacity:0;
}
What To Do – 2
Move all the -webkit-transition properties into the newClassName definition.
div.fadeAway { /* give the transition rules to "after" state */
opacity:0;
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
}
Now really a JavaScript-free. Yay.
comments powered by