diff --git a/assets/index.less b/assets/index.less
index 1408246..96fa606 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -51,8 +51,6 @@
 
   &-content {
     height: 0;
-    transition-duration: .3s;
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     overflow: hidden;
     color: @text-color;
     padding: 0 16px;
@@ -70,7 +68,14 @@
     }
   }
 
+  &-collapsing {
+    transition-duration: .3s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-property: height;
+  }
+
   &-content-active {
+    height: auto;
   }
 
   & > &-item-active {
diff --git a/src/Panel.jsx b/src/Panel.jsx
index e4de7a4..b5252c9 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -81,7 +81,9 @@ module.exports = createClass({
   _anim(opacity) {
     var el = findDOMNode(this.refs.content);
     var scrollHeight = el.scrollHeight + 'px';
+    var collapsing = `${this.props.prefixCls}-collapsing`;
 
+    cssAnimation.addClass(el, collapsing);
     // start state
     el.style.height = opacity ? scrollHeight : 0;
 
@@ -91,6 +93,7 @@ module.exports = createClass({
     }, function() {
       el.style.height = opacity ? 0 : 'auto';
       cssAnimation.setTransition(el, 'Property', '');
+      cssAnimation.removeClass(el, collapsing);
     });
   }