I would encourage you to create to classes and change the class to trigger
the transition. For example, if you want to change the width, do this:
.narrow-animation {
width: 100px;
transition-property: width;
transition-duration: 1s;
}
.wide-animation {
width: 400px;
transition-property: width;
transition-duration: 2s;
}
Then, in GWT, use addStyleName and removeStyleName to add the appropriate
class to "trigger" the animation.
For last year's Google I/O, I submitted a little project that used CSS
transitions to animate a countdown timer. The code just changes the class
on an element and the transition takes care of the animation.
You can see it here http://code.google.com/p/pulazzo-lastcall/ (in the
demo, choose a date in the future to trigger the countdown).
-Andy
On Saturday, September 15, 2012 12:34:00 PM UTC-4, regnoult axel wrote:
>
> Hello,
>
> I do not succeed to use CSS3 transition with GWT...I do not understand how
> to activate the transition without using :hover in the css file.
>
> W3C says that :
> *The effect will start when the specified CSS property changes value. A
> typical CSS property change would be when a user mouse-over an element...*
> *
> *
> So I have:
> focus{
> *height*: 100px;
> transition: all 0.3s ease-out;
> -webkit-transition: all 0.3s ease-out;
> }
>
> focus:hover
> {
> *height*: 200px;
> }
>
> This works, but I do not succeed to activate the transition using :
>
> /*
> ------------------------------------------------------------------------ */
> @UiHandler("focus") void mouse__Over(MouseOverEvent e)
> /*
> ------------------------------------------------------------------------ */
> {
> // TODO - WHICH CODE TO INSERT HERE TO ACTIVATE THE TRANSITION (on
> the focus panel) ?
> }
>
> If you could complete the TODO in order to activate the transition, it
> would help me...
> (I have tried focus.addStyleName(), focus.setHeight() but the transition
> does not appear !)
>
> Thanks you,
>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-web-toolkit/-/VN1XSLeEjEQJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
