Merge 59f9a85 into a54a0fe

react-component · Aug 28, 2015 · ca6150c · ca6150c
2 parents a54a0fe + 59f9a85
commit ca6150c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 27 deletions.
diff --git a/assets/index.less b/assets/index.less
@@ -3,7 +3,7 @@
 @borderStyle: 1px solid #d9d9d9;
 
 #arrow {
-  .common(){
+  .common() {
     width: 0;
     height: 0;
     font-size: 0;
@@ -51,7 +51,6 @@
   }
 
   &-content {
-    height: 0;
     overflow: hidden;
     color: @text-color;
     padding: 0 16px;
@@ -70,13 +69,10 @@
   }
 
   &-collapsing {
-    transition-duration: .3s;
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transition-property: height;
+    transition: height .3s cubic-bezier(0.215, 0.61, 0.355, 1);
   }
 
   &-content-active {
-    height: auto;
   }
 
   & > &-item-active {
@@ -89,4 +85,3 @@
     }
   }
 }
-
diff --git a/src/Panel.jsx b/src/Panel.jsx
@@ -42,7 +42,6 @@ module.exports = createClass({
     const headerCls = `${prefixCls}-header`;
     const contentCls = classnames({
       [`${prefixCls}-content`]: true,
-      [`${prefixCls}-content-active`]: isActive,
     });
     const itemCls = classnames({
       [`${prefixCls}-item`]: true,
@@ -64,45 +63,50 @@ module.exports = createClass({
   },
 
   componentDidMount() {
+    const el = findDOMNode(this.refs.content);
     if (this.props.isActive) {
-      const el = findDOMNode(this.refs.content);
       el.style.height = 'auto';
+    } else {
+      el.style.height = 0;
     }
   },
 
   componentDidUpdate(prevProps) {
     const isActive = this.props.isActive;
-
     // no change
     if (prevProps.isActive === isActive) {
       return;
     }
+    const el = findDOMNode(this.refs.content);
+    const pos = el.getBoundingClientRect();
+    const start = pos.bottom - pos.top + 'px';
+    el.style.height = start;
 
     this._anim(isActive ? 0 : 1);
   },
 
   _anim(opacity) {
     const el = findDOMNode(this.refs.content);
     if (!isSupportCssAnimate) {
-      el.style.height = opacity ? 0 : '';
+      el.style.height = opacity ? 0 : 'auto';
       return;
     }
-
-    const scrollHeight = el.scrollHeight + 'px';
     const collapsing = `${this.props.prefixCls}-collapsing`;
-
-    cssAnimation.addClass(el, collapsing);
-
-    // start state
-    el.style.height = opacity ? scrollHeight : 0;
-
-    cssAnimation.setTransition(el, 'Property', 'height');
-    cssAnimation.style(el, {
-      height: opacity ? 0 : scrollHeight,
-    }, () => {
-      el.style.height = opacity ? 0 : 'auto';
-      cssAnimation.setTransition(el, 'Property', '');
-      cssAnimation.removeClass(el, collapsing);
-    });
+    const scrollHeight = el.scrollHeight + 'px';
+    clearTimeout(this.timer);
+    if (opacity) {
+      cssAnimation.addClass(el, collapsing);
+      el.style.height = 0;
+      this.timer = setTimeout(function() {
+        cssAnimation.removeClass(el, collapsing);
+      }, 300);
+    } else {
+      cssAnimation.addClass(el, collapsing);
+      el.style.height = scrollHeight;
+      this.timer = setTimeout(function() {
+        el.style.height = 'auto';
+        cssAnimation.removeClass(el, collapsing);
+      }, 300);
+    }
   },
 });