CSS 3 transition+ GWT

[Andrei]

If your transition works through CSS, why do you need to activate it in your code? Do you plan to do something else when the transition activates?

[Andrei]

CSS3 transitions are triggered by changes in properties. It can be any property, like "display: none" changing to "display: block". You can change any property of a widget from your code, and it will trigger the transition automatically.

Suppose you want a widget to slowly increase in size. You tie a transition to the "width" and "height" properties. Then you call myWidget.setSize("100px", "100px") in your code, and it will trigger your transition effect.

[Paul Stockley]

I use transitions and they work fine just by using the style object to update the property.

On Sunday, September 16, 2012 7:51:59 PM UTC-4, regnoult axel wrote:

Hi Andrei, 

I will try to answer the best I can regarding to your questions....and most of all, regarding to want I have understood about CSS transition and animation....

1 - Why do you need to activate it in your code?

What I am looking for, for example, is to manipulate CSS transitions + animation such as "cool effects"... For example, I want to show a popup with a funny and cool effect (animation + transition) and I can not show this effect just with :hover...so I want to do it programatically (for example, when the user scroll at the top of the page, it will appear a slideshow trailer, and this "apparition" should be sexy thanks to CSS transition/animation)...

2 - Do you plan to do something else when the transition activates?

If you are talking about something related to the widget's animation, not especially...I am just looking for the cool effect... And I am also asking about how to use these CSS transition, because, the only example I have seen is using :hover to activate the transition.

So in a more general way, I am asking if there is alternative to activate these CSS transition without :hover. And, I am asking these question on the GWT forum, because, I just would like to see a simple example manipulating CSS 3 + GWT....Maybe I could study some existing lib like VISUAL FOX (http://code.google.com/p/visualfox-fx/)....

Cheers,

[Andy]

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,

[Daniel Kurka]

A good example for transitions and animation with gwt is mgwt: http://www.m-gwt.com

-Daniel

2012/9/23 regnoult axel <regn...@gmail.com>

Hi,

Thanks you for your help, I finally succeed to do my transitions and animations.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Joseph Lust]

You should be able to achieve everything you need via CSS class names being added or removed. However, there is one missing functionality which is the transitionend event which is called when a given transition completes. As of GWT 2.4 I cannot get this to work without custom JSNI, which I'd rather not do. The event is not available under DOM.sinkEvent, or under DOM.sinkBitlessEvent (which surprisingly only allows a few predefined events in the DomImpl class, not any string you pass in). 

Perhaps this will be added in a future GWT release?

Sincerely,

Joseph

[Paul Stockley]

I had the same issue as you and ended up patching DomImplStandard to add the webkitTransitionEnd event to sinkBitlessEventImpl.