Thanks Chris & JumpStart, with your help I was able to get this CSS
animation working, using JavaScriptSupport in combination with RequireJS.
Below is the code, for anyone else wishing to do the same.
**The CSS**
.open-section{
transition:0s;
transform: rotate(90deg);
}
.close-section{
transition:0s;
transform: rotate(-90deg);
}
.accordion.active .open-section {
transition:1.0s;
transform: rotate(0deg);
}
.accordion.active .close-section {
transition:1.0s;
transform: rotate(0deg);
}
The animation occurs simply by adding one of the latter two classes to its
former counterpart. The first two display the button 90 degrees offset
(hence the animation).
**The Component's Java Code**
public void afterRender(){
//Invoke client-side javascript to rotate the 'accordion' helm for
this component/zone
javaScriptSupport.require("activate-helm").with("userAccordion");
}
**The RequireJS Script**
define(["jquery"], function($){
return function(accordionId){
var element = document.getElementById(accordionId);
element.classList.add("active");
}
})
The page contains multiple zones, and the above animates the button within
a zone that gets refreshed.
The only glitch is that occasionally, especially with Firefox browser, the
button jumps rather than rotates to it's final position. I suspect the
browser may be prematurely acting on the 'active' version of the CSS
class, before displaying the button in its initial 90 degree offset
position. I'm not quite sure yet how to remedy this. I think having the
RequireJS script wait a while would be a bit of a hack.
Regards,
Chris.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
For additional commands, e-mail: users-h...@tapestry.apache.org
