Merge pull request #810 from ahocevar/transitionend

Use transitionend listeners where available. r=@bartvde

lib/OpenLayers/Layer/Grid.js

@@ -285,6 +285,15 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      */
     rowSign: null,
 
+    /**
+     * Property: transitionendEvents
+     * {Array} Event names for transitionend
+     */
+    transitionendEvents: [
+        'transitionend', 'webkitTransitionEnd', 'otransitionend',
+        'oTransitionEnd'
+    ],
+
     /**
      * Constructor: OpenLayers.Layer.Grid
      * Create a new grid layer
@@ -300,6 +309,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
                                                                 arguments);
         this.grid = [];
         this.tileQueue = [];
+        this._removeBackBuffer = OpenLayers.Function.bind(this.removeBackBuffer, this);
 
         if (this.removeBackBufferDelay === null) {
             this.removeBackBufferDelay = this.singleTile ? 0 : 2500;
@@ -757,6 +767,13 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      * Remove back buffer from DOM.
      */
     removeBackBuffer: function() {
+        if (this._transitionElement) {
+            for (var i=this.transitionendEvents.length-1; i>=0; --i) {
+                OpenLayers.Event.stopObserving(this._transitionElement,
+                    this.transitionendEvents[i], this._removeBackBuffer);
+            }
+            delete this._transitionElement;
+        }
         if(this.backBuffer) {
             this.div.removeChild(this.backBuffer);
             this.backBuffer = null;
@@ -1120,11 +1137,15 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
                 this.loading = false;
                 this.events.triggerEvent("loadend");
                 if(this.backBuffer) {
-                    // the removal of the back buffer is delayed to prevent flash
+                    this._transitionElement = tile.imgDiv;
-                    // effects due to the animation of tile displaying
+                    for (var i=this.transitionendEvents.length-1; i>=0; --i) {
+                        OpenLayers.Event.observe(this._transitionElement,
+                            this.transitionendEvents[i],
+                            this._removeBackBuffer);
+                    }
+                    // the removal of the back buffer is delayed to prevent                     // flash effects due to the animation of tile displaying
                     this.backBufferTimerId = window.setTimeout(
-                        OpenLayers.Function.bind(this.removeBackBuffer, this),
+                        this._removeBackBuffer, this.removeBackBufferDelay
-                        this.removeBackBufferDelay
                     );
                 }
             }