transition refactor

Author: yyx990803

component.json

@@ -61,9 +61,9 @@
     "src/parsers/path.js",
     "src/parsers/template.js",
     "src/parsers/text.js",
-    "src/transition/css.js",
     "src/transition/index.js",
-    "src/transition/js.js",
+    "src/transition/queue.js",
+    "src/transition/transition.js",
     "src/util/debug.js",
     "src/util/dom.js",
     "src/util/env.js",

src/directives/transition.js

@@ -1,4 +1,5 @@
 var _ = require('../util')
+var Transition = require('../transition/transition')
 
 module.exports = {
 
@@ -12,19 +13,15 @@ module.exports = {
   },
 
   update: function (id, oldId) {
+    var el = this.el
     var vm = this.el.__vue__ || this.vm
-    this.el.__v_trans = {
-      id: id,
-      // resolve the custom transition functions now
-      // so the transition module knows this is a
-      // javascript transition without having to check
-      // computed CSS.
-      hooks: _.resolveAsset(vm.$options, 'transitions', id)
-    }
+    var hooks = _.resolveAsset(vm.$options, 'transitions', id)
+    id = id || 'v'
+    el.__v_trans = new Transition(el, id, hooks, vm)
     if (oldId) {
-      _.removeClass(this.el, oldId + '-transition')
+      _.removeClass(el, oldId + '-transition')
     }
-    _.addClass(this.el, (id || 'v') + '-transition')
+    _.addClass(el, id + '-transition')
   }
 
 }

src/transition/apply.js

@@ -1,5 +1,4 @@
 var _ = require('../util')
-var applyTransition = require('./apply')
 
 /**
  * Append with transition.
@@ -107,9 +106,9 @@ exports.blockRemove = function (start, end, vm) {
  */
 
 var apply = exports.apply = function (el, direction, op, vm, cb) {
-  var transData = el.__v_trans
+  var transition = el.__v_trans
   if (
-    !transData ||
+    !transition ||
     !vm._isCompiled ||
     // if the vm is being manipulated by a parent directive
     // during the parent's compilation phase, skip the
@@ -120,5 +119,6 @@ var apply = exports.apply = function (el, direction, op, vm, cb) {
     if (cb) cb()
     return
   }
-  applyTransition(el, direction, op, transData, vm, cb)
+  var action = direction > 0 ? 'enter' : 'leave'
+  transition[action](op, cb)
 }

src/transition/index.js

@@ -0,0 +1,29 @@
+var _ = require('../util')
+var queue = []
+var queued = false
+
+exports.push = function (job) {
+  queue.push(job)
+  if (!queued) {
+    queued = true
+    _.nextTick(flush)
+  }
+}
+
+/**
+ * Flush the queue, and do one forced reflow before
+ * triggering transitions.
+ */
+
+function flush () {
+  // Force layout
+  var f = document.documentElement.offsetHeight
+  for (var i = 0; i < queue.length; i++) {
+    queue[i]()
+  }
+  queue = []
+  queued = false
+  // dummy return, so js linters don't complain about
+  // unused variable f
+  return f
+}