Creating CSS Animations dynamically?

[darkflame]

I have an engine I was making that requires scrolling a large scene amount.
I have had this working with gwt for awhile, but recently spotted I can scroll it much smoother by CSS. I guess the browser is more optimised then my code for this, and as a side-effect I can easily play with ease-in ease-out stuff.

However, the method I used to do this was to add a new style tag to the page and put the css defining the animation keyframes within it

createdStyleTag = DOM.createElement("style");

RootPanel.getBodyElement().appendChild(createdStyleTag);

Then to set the animation

for (String vendor : vendors) {

newstyle=newstyle+"@-"+vendor+"-keyframes "+name+" \n {\n"+

"from { transform: translate(0px,0px); } \n"+

    "to{ transform: translate("+enddifx+"px,"+enddify+"px); } \n"+

    "} \n";

}

Where vendors is a list of vendors (-webkit-  -moz, etc)
Then it was simply a matter of applying a class that set the animation and duration. Worked great on chrome making my app *much* smoother. yay.

Then I read this

https://bugzilla.mozilla.org/show_bug.cgi?id=830056

Despite Firefox supporting CSS animations it seems they dont support them inline. So this sort of on-the-fly defining and running doesnt work.

I wondered if anyone had any alternative methods?

Essentially I am just panning a large absolute panel (with a lot on it) within another one, and am hoping to move it between two runtime set locations in the smoothest possible way.

[Jens]

Have you tried using transitions instead of animations?

So you add 

transition:transform ease-in-out 1s;

transform:translate(0px, 0px);

as CSS class to the element you want to translate and then dynamically add a style attribute to that element which contains transform:translate(targetX, targetY);

-- J.

[Thomas Wrobel]

perfect.
I wasn't aware you could do it just like that. That works fine. (at least on FF and Chrome).

Also saves me from having all those ugly vendor extensions.

~~~
Thomas & Bertines online review show:
http://randomreviewshow.com/index.html
Try it! You might even feel ambivalent about it :)

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/5h6FeUdIh88/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

[Thomas Wrobel]

Actually, a quick note to anyone in future googleing this (hi!) beware of another limitation in firefox

"During a CSS transition, getComputedStyle returns the original property value in Firefox, but the final property value in WebKit."
https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle

So, in firefox, your cant query the current position mid-transition. At least not in the way.
I got a workaround for my own use-case, but thought it was worth noting.

~~~
Thomas & Bertines online review show:
http://randomreviewshow.com/index.html
Try it! You might even feel ambivalent about it :)