优化collapse动画

packages/react-impression/src/components/Collapse/Collapse.js

@@ -53,6 +53,7 @@ export default class Collapse extends React.PureComponent {
 
       return React.cloneElement(child, {
         onClick: this.toggleItemsHandle,
+        active,
       })
     })
 

packages/react-impression/src/components/CollapseBody/CollapseBody.js

@@ -2,26 +2,47 @@ import classnames from 'classnames'
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const CollapseBody = ({ className, children, ...others }) => {
-  delete others.onClick
+class CollapseBody extends React.PureComponent {
+  static propTypes = {
+    /**
+     * 子组件
+     */
+    children: PropTypes.node,
 
-  return (
-    <div {...others} className={classnames('collapse-body', className)}>
-      {children}
-    </div>
-  )
-}
+    /**
+     * 自定义样式
+     */
+    className: PropTypes.string,
+    /**
+     * 是否展开状态
+     */
+    active: PropTypes.bool,
+  }
+
+  get childHeight() {
+    if (this.container) {
+      const child = this.container.children[0]
+      return child ? child.offsetHeight : 0
+    }
+    return 0
+  }
 
-CollapseBody.propTypes = {
-  /**
-   * 子组件
-   */
-  children: PropTypes.node,
+  setContainerRef = element => (this.container = element)
 
-  /**
-   * 自定义样式
-   */
-  className: PropTypes.string,
+  render() {
+    const { className, children, active, ...others } = this.props
+    delete others.onClick
+    return (
+      <div
+        {...others}
+        ref={this.setContainerRef}
+        className={classnames('collapse-body', className)}
+        style={{ maxHeight: active ? this.childHeight : 0 }}
+      >
+        {children}
+      </div>
+    )
+  }
 }
 
 export default CollapseBody

packages/react-impression/src/components/CollapseTitle/CollapseTitle.js

@@ -3,6 +3,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 const CollapseTitle = ({ onClick, children, className, ...others }) => {
+  delete others.active
   return (
     <div
       onClick={onClick}

packages/react-impression/src/components/SidebarBody/SidebarBody.js

@@ -21,11 +21,12 @@ export default class SidebarBody extends React.PureComponent {
     // PerfectScrollbar插件bug
     // 若不延迟初始化滚动条，滚动条ps__rail-y的right值初始状态为'auto'，导致滚动条错误地居左侧显示
     // https://github.com/utatti/perfect-scrollbar/issues/715
-    setTimeout(() => {
+    window.requestAnimationFrame(() => {
       this.scrollbar = new PerfectScrollbar(this.container, {
         suppressScrollX: true,
       })
-    }, 1000)
+      this.handleUpdateScroll()
+    })
   }
 
   componentWillUnmount() {
@@ -35,9 +36,10 @@ export default class SidebarBody extends React.PureComponent {
 
   handleUpdateScroll = () => {
     // 延迟更新滚动条
-    window.requestAnimationFrame(() => {
+    // Collapse组件增加动画效果后，便不能用requestAnimationFrame更新滚动条了 2018-12-03
+    setTimeout(() => {
       this.scrollbar.update()
-    })
+    }, 400)
   }
 
   setContainerRef = element => (this.container = element)

packages/react-impression/src/styles/modules/_animation.scss

@@ -7,25 +7,6 @@
   }
 }
 
-// .collapse {
-// display: none;
-
-// &.in {
-//     display: block;
-// }
-// tr&.in    { display: table-row; }
-// tbody&.in { display: table-row-group; }
-// }
-
-.collapsing {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  transition-timing-function: ease;
-  transition-duration: 0.35s;
-  transition-property: height;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);

packages/react-impression/src/styles/modules/_collapse.scss

@@ -6,11 +6,6 @@
       transform-origin: center center;
       transform: rotate(90deg);
     }
-
-    .collapse-body {
-      height: auto;
-      animation: $collapse-animation;
-    }
   }
 
   .nav-item {
@@ -29,9 +24,9 @@
 }
 
 .collapse-body {
-  height: 0;
   overflow: hidden;
   text-indent: $collapse-text-indent;
   transform-origin: center 0;
   font-size: $collapse-font-size;
+  transition: $collapse-animation;
 }

packages/react-impression/src/styles/variables/_collapse.scss

@@ -1,5 +1,5 @@
 // Collapse
 $collapse-transition: all 0.18s ease-in-out !default;
-$collapse-animation: scaleIn 0.36s ease-in-out !default;
+$collapse-animation: max-height .35s ease !default;
 $collapse-font-size: 0.8em !default;
 $collapse-text-indent: 1.5rem !default;