我希望我的GWT小部件在其CSS animation结束时得到通知。
在纯HTML / Javascript中,可以通过注册如下的事件处理程序轻松完成:
elem.addEventListener("webkitAnimationEnd", function(){
// do something
}, false);
// add more for Mozilla etc.
如何在GWT中执行此操作?
这种类型的事件对于GWT的DOMImpl
类是未知的,所以我一直收到错误“试图收集未知事件类型webkitAnimationEnd ”。
谢谢!
答案 0 :(得分:5)
根据Darthenius的答案和Clay Lenhart's Blog,我终于找到了解决方案:
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();
}
像魅力一样!谢谢Darthenius!
如果有人能发现这方面的弱点,我当然会很高兴知道。
答案 1 :(得分:1)
您可以自己编写一些本机(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);
答案 2 :(得分:0)
我对Darthenius的解决方案进行了一些扩展。此代码还包括一个在完成时删除事件处理程序的机制。这是我的应用程序所需要的,但在所有情况下可能都不是你想要的。 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);
}
}