Question

有没有办法以编程方式定义和启动css动画？我想将div从一个绝对位置动画到另一个绝对位置。类似的东西：

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");

我看到我们可以在css文件中定义一个css动画，并且更改div的样式名称将触发动画。但我不知道我们是否可以以编程方式修改css中定义的动画。例如：

// 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.

由于

Answer 1

您可以使用getElement().getStyle().setProperty( property, value )设置任何css属性。但这不是正确的做法。建议的方法是通过css。

此Link可能对您有所帮助

Answer 2

你有几种方法

1）GWT动画 - http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwAnimation

2）Jquery方法 - 通过GWTQuery - https://groups.google.com/forum/?fromgroups=#!topic/google-web-toolkit/6kOSm0HBP4A

3）GWN中的JSNI - How to add CSS AnimationEnd event handler to GWT widget?

修改css动画属性？

2 个答案: