如何添加CSS AnimationEnd事件處理程序到GWT小部件？

我希望我的GWT小部件在CSS animation結束時得到通知。如何添加CSS AnimationEnd事件處理程序到GWT小部件？

elem.addEventListener("webkitAnimationEnd", function(){ 
    // do something 
}, false); 
// add more for Mozilla etc.

我怎樣才能做到這一點在GWT：

在純HTML/JavaScript的這是很容易通過註冊的事件處理程序，像這樣做呢？

GWT的DOMImpl類不知道這種類型的事件，所以我不斷收到錯誤「試圖吸收未知事件類型webkitAnimationEnd」。

謝謝！

來源

2011-11-23 Thomas Jensen

你總是可以編寫一些本地（JavaScript的）的編寫自己：

public class CssAnimation { 
    public static native void registerCssCallback(
     Element elem, AsyncCallback<Void> callback) /*-{ 
    elem.addEventListener("webkitAnimationEnd", function() { 
     $entry(@CssAnimation::cssCallback(Lcom/google/gwt/user/client/rpc/AsyncCallback;)(callback)); 
    }, false); 
    }-*/; 


    protected static void cssCallback(AsyncCallback<Void> callback) { 
    callback.onSuccess(null); 
    } 
}

我還沒有試過上面的代碼。讓我知道它是否按預期工作。

您可以使用GWT的Animation類來達到同樣的效果。例如，

new com.google.gwt.animation.client.Animation() { 
    final com.google.gwt.dom.client.Style es = widget.getElement().getStyle(); 

    @Override 
    protected void onUpdate(double progress) { 
     setOpacity(1 - interpolate(progress)); 
    } 

    private void setOpacity(double opacity) { 
     es.setProperty("opacity", Double.toString(opacity)); 
     es.setProperty("filter", "alpha(opacity=" + 100 * opacity + ")"); 
    } 

    @Override 
    protected void onComplete() { 
     /* ... run some code when animation completes ... */ 
    } 
    }.run(2000, 5000);

來源

2011-11-24 10:08:51

有趣的，我不知道。但這樣做會導致腳本動畫，而不是CSS動畫，對吧？ GWT仍然不知道事件。腳本動畫在重負載或某些移動設備上的平滑性能方面有一些缺點。 –

是的，這將導致腳本動畫，這可能不如純CSS動畫的CPU效率。 –

@Kev將這兩個答案分開保存會更好......上面的評論參考了該行下面的部分（腳本解決方案）。被接受的答案只是線上的最上面部分，它描述了一種完全不同的方法。 –

基於Darthenius的回答和Clay Lenhart's Blog，我終於塵埃落定了此解決方案：

private native void registerAnimationEndHandler(final Element pElement, 
    final CbAnimationEndHandlerIF pHandler) 
/*-{ 
    var callback = function(){ 
     [email protected]::onAnimationEnd()(); 
    } 
    if (navigator.userAgent.indexOf('MSIE') < 0) { // no MSIE support 
     pElement.addEventListener("webkitAnimationEnd", callback, false); // Webkit 
     pElement.addEventListener("animationend", callback, false); // Mozilla 
    } 
}-*/;

的CbAnimationEndHandlerIF是一個簡單的自定義EventHandler接口：

public interface CbAnimationEndHandlerIF extends EventHandler 
{ 
    void onAnimationEnd(); 
}

作品像魅力！謝謝Darthenius！

如果任何人都可以發現這個弱點，當然我很樂意知道。

來源

2011-11-24 21:16:45

不客氣。順便說一下''callback'好的抽象。 –

我剛剛修改了上面的代碼以排除MSIE，因爲MSIE不能執行CSS關鍵幀動畫（至少到版本9），並且還需要用於添加偵聽器的不同語法。 –

我在Darthenius的解決方案上擴展了一下。該代碼還包括一個機制，可以在完成時刪除事件處理程序。這是我的應用程序所需要的，但可能不是您想要的所有情況。因人而異！

我最後的代碼如下所示：

import com.google.gwt.dom.client.Element; 
import com.google.gwt.user.client.rpc.AsyncCallback; 

public class CssAnimation { 
    public static native void registerCssCallback(Element elem, AsyncCallback<Void> callback) /*-{ 
     var eventListener = function() { 
      $entry(@CssAnimation::cssCallback(Lcom/google/gwt/user/client/rpc/AsyncCallback;)(callback)); 
      elem.removeEventListener("webkitAnimationEnd", eventListener); 
     }; 

     elem.addEventListener("webkitAnimationEnd", eventListener, false); 
    }-*/; 

    protected static void cssCallback(AsyncCallback<Void> callback) { 
     callback.onSuccess(null); 
    } 
}

來源

2015-02-25 23:42:42

如何添加CSS AnimationEnd事件處理程序到GWT小部件？

回答

相關問題