Event at launch of animation

CONTRIBUTING.md

@@ -9,7 +9,7 @@
  * Probably the best way for us to get a handle on what's going on is you providing us with a short example using something like a [JSFiddle](http://jsfiddle.net/).
 
 ##### Stick around
- * If you're interested in getting your changes in and/or issue resolved, it's extremely likely you're going to have to have some discussion about it before that happens. So don't just drop something on us and leave and expect that something will come of it.
+ * If you're interested in getting your changes in and/or issue resolved, it's extremely likely you're going to have some discussion about it before that happens. So don't just drop something on us and leave and expect that something will come of it.
 
 ##### Discussion before code
  * If you don't want to waste your time writing code that might not be used, it's probably best to make an issue and discuss it with us first before you start writing. 

dist/jquery.flip.js

@@ -1,6 +1,6 @@
-/*! flip - v1.1.2 - 2016-10-20
+/*! flip - v1.1.2 - 2018-03-27
 * https://github.com/nnattawat/flip
-* Copyright (c) 2016 Nattawat Nonsung; Licensed MIT */
+* Copyright (c) 2018 Nattawat Nonsung; Licensed MIT */
 (function( $ ) {
   /*
    * Private attributes and method
@@ -93,24 +93,14 @@
    */
   $.extend(Flip.prototype, {
 
-    flipDone: function(callback) {
-      var self = this;
-      // Providing a nicely wrapped up callback because transform is essentially async
-      self.element.one(whichTransitionEvent(), function() {
-        self.element.trigger('flip:done');
-        if (typeof callback === 'function') {
-          callback.call(self.element);
-        }
-      });
-    },
-
     flip: function(callback) {
       if (this.isFlipped) {
         return;
       }
 
+      this.fireEvents(['flip:start']);
       this.isFlipped = true;
-
+      
       var rotateAxis = "rotate" + this.setting.axis;
       this.frontElement.css({
         transform: rotateAxis + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
@@ -121,14 +111,15 @@
         transform: rotateAxis + "(0deg)",
         "z-index": "1"
       });
-      this.flipDone(callback);
+      this.transitionFinished(callback, ['flip:done']);
     },
 
     unflip: function(callback) {
       if (!this.isFlipped) {
         return;
       }
 
+      this.fireEvents(['unflip:start']);
       this.isFlipped = false;
 
       var rotateAxis = "rotate" + this.setting.axis;
@@ -141,7 +132,25 @@
         transform: rotateAxis + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
         "z-index": "0"
       });
-      this.flipDone(callback);
+      this.transitionFinished(callback, ['flip:done', 'unflip:done']);
+    },
+
+    transitionFinished: function(callback, eventsToTrigger){
+      var self = this;
+      // Providing a nicely wrapped up callback because transform is essentially async
+      self.element.one(whichTransitionEvent(), function() {
+        self.fireEvents(eventsToTrigger);
+        if (typeof callback === 'function') {
+          callback.call(self.element);
+        }
+      });
+    },
+
+    fireEvents: function(events){
+      var self = this;
+      $.each(events, function(index, event) {
+        self.element.trigger(event);
+      });
     },
 
     getFrontElement: function() {
@@ -272,7 +281,7 @@
     },
 
     flipChanged: function(callback) {
-      this.element.trigger('flip:change');
+      this.fireEvents(['flip:change']);
       if (typeof callback === 'function') {
         callback.call(this.element);
       }