change how collapse works - collapse, collapsing, and in

2 files changed, 42 insertions, 30 deletions

diff --git a/js/collapse.js b/js/collapse.js
index 408eaac0d..34ac3c7fa 100644
--- a/js/collapse.js
+++ b/js/collapse.js
@@ -48,8 +48,6 @@
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var dimension = this.dimension()
-    var scroll    = $.camelCase(['scroll', dimension].join('-'))
     var actives   = this.$parent && this.$parent.find('> .accordion-group > .in')
 
     if (actives && actives.length) {
@@ -59,10 +57,32 @@
       hasData || actives.data('bs.collapse', null)
     }
 
-    this.$element[dimension](0)
-    this.transition('addClass', 'shown.bs.collapse')
+    var dimension = this.dimension()
+
+    this.$element
+      .removeClass('collapse')
+      .addClass('collapsing')
+      [dimension](0)
+
+    this.transitioning = 1
+
+    var complete = function () {
+      this.$element
+        .removeClass('collapsing')
+        .addClass('in')
+        [dimension]('auto')
+      this.transitioning = 0
+      this.$element.trigger('shown.bs.collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    var scrollSize = $.camelCase(['scroll', dimension].join('-'))
 
-    if ($.support.transition) this.$element[dimension](this.$element[0][scroll])
+    this.$element
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
+      [dimension](this.$element[0][scrollSize])
   }
 
   Collapse.prototype.hide = function () {
@@ -73,41 +93,32 @@
     if (startEvent.isDefaultPrevented()) return
 
     var dimension = this.dimension()
-    this.reset(this.$element[dimension]())
-    this.transition('removeClass', 'hidden.bs.collapse')
-    this.$element[dimension](0)
-  }
 
-  Collapse.prototype.reset = function (size) {
-    var dimension = this.dimension()
+    this.$element
+      [dimension](this.$element[dimension]())
+      [0].offsetHeight
 
     this.$element
+      .addClass('collapsing')
       .removeClass('collapse')
-      [dimension](size || 'auto')
-      [0].offsetWidth
+      .removeClass('in')
 
-    this.$element[size != null ? 'addClass' : 'removeClass']('collapse')
-
-    return this
-  }
+    this.transitioning = 1
 
-  Collapse.prototype.transition = function (method, completeEvent) {
-    var that     = this
     var complete = function () {
-      if (completeEvent == 'shown.bs.collapse') that.reset()
-      that.transitioning = 0
-      that.$element.trigger(completeEvent)
+      this.transitioning = 0
+      this.$element
+        .trigger('hidden.bs.collapse')
+        .removeClass('collapsing')
+        .addClass('collapse')
     }
 
-    this.transitioning = 1
-
-    this.$element[method]('in')
+    if (!$.support.transition) return complete.call(this)
 
-    $.support.transition && this.$element.hasClass('collapse') ?
-      this.$element
-        .one($.support.transition.end, complete)
-        .emulateTransitionEnd(350) :
-      complete()
+    this.$element
+      [dimension](0)
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
   }
 
   Collapse.prototype.toggle = function () {
diff --git a/js/transition.js b/js/transition.js
index 8a484b5e9..dfb64108b 100644
--- a/js/transition.js
+++ b/js/transition.js
@@ -46,6 +46,7 @@
     $(this).one('webkitTransitionEnd', function () { called = true })
     var callback = function () { if (!called) $($el).trigger('webkitTransitionEnd') }
     setTimeout(callback, duration)
+    return this
   }
 
   $(function () {