如何将 CSS AnimationEnd 事件处理程序添加到 GWT 小部件?

发布于 2024-12-17 15:05:08 字数 504 浏览 0 评论 0原文

我希望我的 GWT 小部件在其 CSS 动画 结束时收到通知。

在纯 HTML/Javascript 中,这可以通过注册事件处理程序轻松完成,如下所示:

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

How can I do this in GWT?

这种类型的事件对于 GWT 的 DOMImpl 类来说是未知的,因此我不断收到错误:

尝试接收未知事件类型 webkitAnimationEnd”。

I would like my GWT widget to be notified when its CSS animation is over.

In plain HTML/Javascript this is easily done by registering an event handler like so:

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

How can I do this in GWT?

This type of event is unknown to GWT's DOMImpl classes, so I keep getting an error:

"Trying to sink unknown event type webkitAnimationEnd".

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

剩余の解释 2024-12-24 15:05:08

基于 Darthenius 的回答和 Clay Lenhart 的博客< /a>,我最终选择了这个解决方案:

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();
}

工作起来就像一个魅力!谢谢达提尼乌斯!

如果有人能发现其中的弱点,我当然很乐意知道。

Based on Darthenius' answer and Clay Lenhart's Blog, I finally settled for this solution:

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
    }
}-*/;

The CbAnimationEndHandlerIF is a simple custom EventHandler interface:

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

Works like a charm! Thanks Darthenius!

If anyone can spot a weakness in this, of course I'd be happy to know.

北恋 2024-12-24 15:05:08

您始终可以自己编写一些本机(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 的动画类来达到同样的效果。例如,

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

You can always write some of the native (JavaScript) code yourself:

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

I haven't tried the code above. Let me know if it works as expected.


You can use GWT's Animation class to achieve the same effect. For example,

  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);
风为裳 2024-12-24 15:05:08

我对达特尼乌斯的解决方案进行了一些扩展。此代码还包括一种在事件处理程序完成时删除该事件处理程序的机制。这是我的应用程序所需要的,但可能不是您在所有情况下都想要的。嗯嗯!

我的最终代码如下所示:

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

I expanded a bit on the solution from Darthenius. This code also includes a mechanism to remove the event handler when it is finished. This is what I needed for my application but may not be what you want in all contexts. YMMV!

My final code looks like this:

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);
    }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文