diff --git a/package.json b/package.json
index 5bbcf47..fbaea06 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,8 @@
     "react-transition-group": "^4.4.1",
     "semver": "6.3.0",
     "ts-pnp": "1.1.6",
-    "velocity-animate": "^1.5.2"
+    "velocity-animate": "^1.5.2",
+    "velocity-react": "^1.4.3"
   },
   "scripts": {
     "start": "node scripts/start.js",
diff --git a/src/pages/matter/widget/MatterPanel.tsx b/src/pages/matter/widget/MatterPanel.tsx
index 2cd43bb..f1accb8 100644
--- a/src/pages/matter/widget/MatterPanel.tsx
+++ b/src/pages/matter/widget/MatterPanel.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import copy from "copy-to-clipboard";
+import VelocityReact from 'velocity-react';
 import Matter from "../../../common/model/matter/Matter";
 import TankComponent from "../../../common/component/TankComponent";
 import Director from "./Director";
@@ -204,13 +205,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
   };
 
   toggleHandles = () => {
-    this.transitionStatus = !this.transitionStatus;
-    if (this.transitionStatus) this.showMore = true;
-    this.updateUI();
-  };
-
-  onExited = () => {
-    this.showMore = false;
+    this.showMore = !this.showMore;
     this.updateUI();
   };
 
@@ -342,90 +337,95 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
           </div>
         </div>
 
-        <Expanding inStatus={this.transitionStatus} onExited={this.onExited}>
-          {this.showMore ? (
-            <div className="visible-mobile more-panel">
-              <div className="cell-btn navy">
-                <span>{DateUtil.simpleDateHourMinute(matter.updateTime)}</span>
-                <span className="matter-size">
+
+          <VelocityReact.VelocityTransitionGroup  enter={{animation: "slideDown"}} leave={{animation: "slideUp"}}>
+
+            {this.showMore ? (
+              <div>
+                <div className="visible-mobile more-panel">
+                  <div className="cell-btn navy">
+                    <span>{DateUtil.simpleDateHourMinute(matter.updateTime)}</span>
+                    <span className="matter-size">
                   {StringUtil.humanFileSize(matter.size)}
                 </span>
-              </div>
+                  </div>
 
-              {!matter.dir && matter.privacy && (
-                <div
-                  className="cell-btn navy"
-                  onClick={(e) =>
-                    SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
-                  }
-                >
-                  <UnlockFilled className="btn-action mr5" />
-                  设置为公有文件
+                  {!matter.dir && matter.privacy && (
+                    <div
+                      className="cell-btn navy"
+                      onClick={(e) =>
+                        SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
+                      }
+                    >
+                      <UnlockFilled className="btn-action mr5" />
+                      设置为公有文件
+                    </div>
+                  )}
+
+                  {!matter.dir && !matter.privacy && (
+                    <div
+                      className="cell-btn navy"
+                      onClick={(e) =>
+                        SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
+                      }
+                    >
+                      <LockFilled className="btn-action mr5" />
+                      设置为私有文件
+                    </div>
+                  )}
+
+                  <div
+                    className="cell-btn navy"
+                    onClick={(e) =>
+                      SafeUtil.stopPropagationWrap(e)(
+                        Sun.navigateTo("/matter/detail/" + matter.uuid)
+                      )
+                    }
+                  >
+                    <InfoCircleOutlined className="btn-action mr5" />
+                    文件详情
+                  </div>
+                  <div
+                    className="cell-btn navy"
+                    onClick={(e) =>
+                      SafeUtil.stopPropagationWrap(e)(this.prepareRename())
+                    }
+                  >
+                    <EditOutlined className="btn-action mr5" />
+                    重命名
+                  </div>
+                  <div
+                    className="cell-btn navy"
+                    onClick={(e) =>
+                      SafeUtil.stopPropagationWrap(e)(this.clipboard())
+                    }
+                  >
+                    <LinkOutlined className="btn-action mr5" />
+                    复制下载链接
+                  </div>
+                  <div
+                    className="cell-btn navy"
+                    onClick={(e) =>
+                      SafeUtil.stopPropagationWrap(e)(matter.download())
+                    }
+                  >
+                    <DownloadOutlined className="btn-action mr5" />
+                    下载
+                  </div>
+                  <div
+                    className="cell-btn red"
+                    onClick={(e) =>
+                      SafeUtil.stopPropagationWrap(e)(this.deleteMatter())
+                    }
+                  >
+                    <DeleteOutlined className="btn-action mr5" />
+                    删除
+                  </div>
                 </div>
-              )}
+              </div>
+            ) : undefined}
+          </VelocityReact.VelocityTransitionGroup>
 
-              {!matter.dir && !matter.privacy && (
-                <div
-                  className="cell-btn navy"
-                  onClick={(e) =>
-                    SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
-                  }
-                >
-                  <LockFilled className="btn-action mr5" />
-                  设置为私有文件
-                </div>
-              )}
-
-              <div
-                className="cell-btn navy"
-                onClick={(e) =>
-                  SafeUtil.stopPropagationWrap(e)(
-                    Sun.navigateTo("/matter/detail/" + matter.uuid)
-                  )
-                }
-              >
-                <InfoCircleOutlined className="btn-action mr5" />
-                文件详情
-              </div>
-              <div
-                className="cell-btn navy"
-                onClick={(e) =>
-                  SafeUtil.stopPropagationWrap(e)(this.prepareRename())
-                }
-              >
-                <EditOutlined className="btn-action mr5" />
-                重命名
-              </div>
-              <div
-                className="cell-btn navy"
-                onClick={(e) =>
-                  SafeUtil.stopPropagationWrap(e)(this.clipboard())
-                }
-              >
-                <LinkOutlined className="btn-action mr5" />
-                复制下载链接
-              </div>
-              <div
-                className="cell-btn navy"
-                onClick={(e) =>
-                  SafeUtil.stopPropagationWrap(e)(matter.download())
-                }
-              >
-                <DownloadOutlined className="btn-action mr5" />
-                下载
-              </div>
-              <div
-                className="cell-btn red"
-                onClick={(e) =>
-                  SafeUtil.stopPropagationWrap(e)(this.deleteMatter())
-                }
-              >
-                <DeleteOutlined className="btn-action mr5" />
-                删除
-              </div>
-            </div>
-          ) : null}
-        </Expanding>
       </div>
     );
   }
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index fc788c1..be7989f 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -69,3 +69,8 @@ declare module 'velocity-animate' {
   import Velocity from 'velocity-animate';
   export default Velocity;
 }
+
+declare module 'velocity-react' {
+  import VelocityReact from 'velocity-react';
+  export default VelocityReact;
+}