How to Implement CSS3 GWT TransitionEnd Listener

Question

I want to use the transitionend Mozilla CSS3 property to fire events when a CSS3 transition is complete. I know I could use timers for a similar functionality, but in the spirit of CSS3 animation, let's hand that off to the browser. Here is an example of this event in action.

The rub: GWT 2.4 does not support this event in the DOM.setEventListener supported event types. I tried using:

DOM.sinkBitlessEvent(element, "transitionend");

But using the debugger found that it only supported (via rebinding):

• dragenter
• dragexit
• dragover
• drop

So, short of writing Native event handler JSNI code, which opens me up to memory leaks, how does one listen for an event on an element in GWT that is not supported out of the box by GWT?

For reference, the below is what GWT 2.3 builds for gecko_1.8 permutation in DomImplStandard.java:

  protected native void sinkBitlessEventImpl(Element elem, String eventTypeName) /*-{
   if (eventTypeName == "dragenter")
      elem.ondragenter = @com.google.gwt.user.client.impl.DOMImplStandard::dispatchEvent;
    if (eventTypeName == "dragexit")
      elem.ondragexit  = @com.google.gwt.user.client.impl.DOMImplStandard::dispatchEvent;
    if (eventTypeName == "dragover")
      elem.ondragover  = @com.google.gwt.user.client.impl.DOMImplStandard::dispatchEvent;
    if (eventTypeName == "drop")
      elem.ondrop      = @com.google.gwt.user.client.impl.DOMImplStandard::dispatchEvent;
  }-*/

Answer 1

It seams that mgwt manages transition events (among others). They replace com.google.gwt.user.client.impl.DOMImpl with their own version. See the module descriptor. But looking at one of their DOMImpl (eg. DOMImplMobileSafari) they write a native event handler:

//transistion end
if (chMask & 0x8000000) {
    if(bits & 0x8000000){
        elem.addEventListener('webkitTransitionEnd', @com.google.gwt.user.client.impl.DOMImplStandard::dispatchEvent, false);
    }
}

I don't understand how they manage memory leaks.