Modify a css animation property?

Question

Is there a way to programatically define and start a css animation? I'd like to animate a div from one absolute position to another. Something like:

FlowPanel fp = new FlowPanel();
fp.getElement().getStyle().setPosition(Position.ABSOLUTE);
fp.getElement().getStyle().setLeft(50, Style.Unit.PX);
fp.getElement().getStyle().setTop(50, Style.Unit.PX);

...

// something like:
fp.setAnimation("top: 300px");

I saw that we could define a css animation in our css file, and changing the name of the div's style will trigger the animation. But I don't know if we can programatically modify an animation defined in css. For example:

// css file
.testAnimation {
  top: 500px;
  transition-property: top;
  transition-duration: 1s;
}

...

// But we can't modify the "top" attribute here depending on runtime needs?:
fp.setStyleName("testAnimation"); // I may want "top" to be some other value here.

Thanks

Is this related to http://stackoverflow.com/questions/8249880/how-to-add-css-animationend-event-handler-to-gwt-widget — appbootup, Jan 10 '13 at 03:28

score 0 · Answer 1 · answered Jan 10 '13 at 03:21

0

You can use getElement().getStyle().setProperty( property, value ) to set any css property. But this is not the right way of doing it. Suggested way is to do via css.

This Link might help you

answered Jan 10 '13 at 03:21

Abhijith Nagaraja

3,370
6
27
55

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

You have several approaches

1) GWT Animation - http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwAnimation

2) Jquery Approach - via GWTQuery - https://groups.google.com/forum/?fromgroups=#!topic/google-web-toolkit/6kOSm0HBP4A

3) JSNI In GWT - How to add CSS AnimationEnd event handler to GWT widget?

edited May 23 '17 at 11:48

Community

1
1

answered Jan 10 '13 at 03:34

appbootup

9,537
3
33
65

Modify a css animation property?

2 Answers2