修改一個css動畫屬性？

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

你有幾種方法

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）JSNI在GWT - How to add CSS AnimationEnd event handler to GWT widget?

Answer 2

您可以使用getElement().getStyle().setProperty(property, value)設置任何CSS屬性。但這不是正確的做法。建議的方法是通過CSS來完成。

這Link可以幫助你