js transitions

changes.md

@@ -171,4 +171,33 @@ With `v-transition="my-transition"`, Vue will:
 
 2. If no custom JavaScript transition is found, it will automatically sniff whether the target element has CSS transitions or CSS animations applied, and add/remove the classes as before.
 
-3. If no transitions/animations are detected, the DOM manipulation is executed immediately instead of hung up waiting for an event.
+3. If no transitions/animations are detected, the DOM manipulation is executed immediately instead of hung up waiting for an event.
+
+### JavaScript transitions API change
+
+Now more similar to Angular:
+
+``` js
+Vue.transition('fade', {
+  enter: function (el, done) {
+    // element is already inserted into the DOM
+    // call done when animation finishes.
+    $(el)
+      .css('opacity', 0)
+      .animate({ opacity: 1 }, 1000, done)
+    // optionally return a "cancel" function
+    // to clean up if the animation is cancelled
+    return function () {
+      $(el).stop()
+    }
+  },
+  leave: function (el, done) {
+    // same as enter
+    $(el)
+      .animate({ opacity: 0 }, 1000, done)
+    return function () {
+      $(el).stop()
+    }
+  }
+})
+```

src/transition/index.js

@@ -98,6 +98,7 @@ var apply = exports.apply = function (el, direction, op, vm) {
       el,
       direction,
       applyOp,
+      transData,
       jsTransition
     )
   } else if (transData && _.transitionEndEvent) {

src/transition/js.js

@@ -1,3 +1,35 @@
-module.exports = function () {
-  
+/**
+ * Apply JavaScript enter/leave functions.
+ *
+ * @param {Element} el
+ * @param {Number} direction - 1: enter, -1: leave
+ * @param {Function} op - the actual DOM operation
+ * @param {Object} data - target element's transition data
+ * @param {Object} def - transition definition object
+ */
+
+module.exports = function (el, direction, op, data, def) {
+  if (data.cancel) {
+    data.cancel()
+    data.cancel = null
+  }
+  var enter = def.enter
+  var leave = def.leave
+  if (direction > 0) { // enter
+    op()
+    if (enter) {
+      data.cancel = enter(el, function () {
+        data.cancel = null
+      })
+    }
+  } else { // leave
+    if (leave) {
+      data.cancel = leave(el, function () {
+        op()
+        data.cancel = null
+      })
+    } else {
+      op()
+    }
+  }
 }