如何添加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小部件？

回答

相关问题