Implemented animation end callbacks

Resolves Turbo87#16

README.md

@@ -88,11 +88,20 @@ The sidebar can be configured with these options:
 Whenever the visibility of the sidebar is changed, an event is fired on the sidebar instance. You can listen for these events like this:
 
 ~~~~javascript
-sidebar.on('hide', function () {
+sidebar.on('hidden', function () {
     console.log('Sidebar is now hidden.');
 });
 ~~~~
 
+Available events:
+
+- **show**: Show animation is starting, sidebar will be visible.
+- **shown**: Show animation finished, sidebar is now visible.
+- **hide**: Hide animation is starting, sidebar will be hidden.
+- **hidden**: Hide animation finished, sidebar is now hidden.
+
+Note that the `shown` and `hidden` events depend on `transitionend`/`webkitTransitionEnd` which might not be supported by all browsers yet.
+
 
 ## Compatibility
 

examples/index.html

@@ -84,11 +84,19 @@ <h1>leaflet-sidebar</h1>
         })
 
         sidebar.on('show', function () {
-            console.log('Sidebar visible.');
+            console.log('Sidebar will be visible.');
+        });
+
+        sidebar.on('shown', function () {
+            console.log('Sidebar is visible.');
         });
 
         sidebar.on('hide', function () {
-            console.log('Sidebar hidden.');
+            console.log('Sidebar will be hidden.');
+        });
+
+        sidebar.on('hidden', function () {
+            console.log('Sidebar is hidden.');
         });
 
         L.DomEvent.on(sidebar.getCloseButton(), 'click', function () {

src/L.Control.Sidebar.js

@@ -46,6 +46,12 @@ L.Control.Sidebar = L.Control.extend({
             L.DomEvent.on(close, 'click', this.hide, this);
         }
 
+        L.DomEvent
+            .on(container, 'transitionend',
+                this._handleTransitionEvent, this)
+            .on(container, 'webkitTransitionEnd',
+                this._handleTransitionEvent, this);
+
         // Attach sidebar container to controls container
         var controlContainer = map._controlContainer;
         controlContainer.insertBefore(container, controlContainer.firstChild);
@@ -88,6 +94,12 @@ L.Control.Sidebar = L.Control.extend({
             .off(content, 'mousewheel', stop)
             .off(content, 'MozMousePixelScroll', stop);
 
+        L.DomEvent
+            .off(container, 'transitionend',
+                this._handleTransitionEvent, this)
+            .off(container, 'webkitTransitionEnd',
+                this._handleTransitionEvent, this);
+
         if (this._closeButton && this._close) {
             var close = this._closeButton;
 
@@ -155,6 +167,11 @@ L.Control.Sidebar = L.Control.extend({
         } else {
             return this._container.offsetWidth;
         }
+    },
+
+    _handleTransitionEvent: function (e) {
+        if (e.propertyName == 'left' || e.propertyName == 'right')
+            this.fire(this.isVisible() ? 'shown' : 'hidden');
     }
 });