Как добавить обработчик событий CSS AnimationEnd в виджет GWT? - PullRequest
Новая
       40

Как добавить обработчик событий CSS AnimationEnd в виджет GWT?

5 голосов
/ 24 ноября 2011

Я бы хотел, чтобы мой виджет GWT получал уведомление, когда его CSS-анимация закончена.

В простом HTML / Javascript это легко сделать, зарегистрировав обработчик событий следующим образом: 

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

Как я могу сделать это в GWT?

Этот тип события неизвестен классам DOMImpl GWT, поэтому я продолжаю получать сообщение об ошибке " Попытка утопить неизвестный тип события webkitAnimationEnd ".

Спасибо!

Ответы [ 3 ]

5 голосов
/ 25 ноября 2011

Основываясь на ответе Дартениуса и Блоге Клея Ленхарта , я наконец-то остановился на этом решении: 

private native void registerAnimationEndHandler(final Element pElement,
    final CbAnimationEndHandlerIF pHandler)
/*-{
    var callback = function(){
       pHandler.@fully.qualified.CbAnimationEndHandlerIF::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();
}

Работает как шарм!Спасибо, Дартениус!

Если кто-то может заметить слабость в этом, конечно, я был бы рад узнать.

1 голос
/ 24 ноября 2011

Вы всегда можете написать часть собственного (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);
0 голосов
/ 26 февраля 2015

Я немного расширил решение от Дартениуса.Этот код также включает в себя механизм для удаления обработчика события, когда он закончен.Это то, что мне нужно для моего приложения, но, возможно, не то, что вы хотите во всех контекстах.YMMV!

Мой окончательный код выглядит так: 

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