diff --git a/frontend/src/components/main-side-nav.js b/frontend/src/components/main-side-nav.js
index 9888bce5f6d..9f3ff12dbf7 100644
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -124,7 +124,11 @@ class MainSideNav extends React.Component {
       );
     }
     return (
-      <ul id="share-admin-sub-nav" className={`nav sub-nav nav-pills flex-column ${this.state.sharedExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style} >
+      <ul
+        id="share-admin-sub-nav"
+        className={`nav sub-nav nav-pills flex-column ${this.state.sharedExtended ? 'side-panel-slide-share-admin' : 'side-panel-slide-up-share-admin'}`}
+        style={style}
+      >
         {canAddRepo && (
           <li className="nav-item">
             <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={(e) => this.tabItemClick(e, 'share-admin-libs')}>
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 7c1f8a988c4..e8f3b60478b 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -744,6 +744,7 @@ a, a:hover { color: #ec8000; }
   margin-right: 6px;
 }
 
+/* files container height more than 200px, use 0.3s animation */
 .side-panel-slide {
     transition: all .3s ease-in-out;
 }
@@ -753,6 +754,16 @@ a, a:hover { color: #ec8000; }
     height: 0;
 }
 
+/* share admin container height less than 100px, use 0.15s animation */
+.side-panel-slide-share-admin {
+    transition: all .15s ease-in-out;
+}
+
+.side-panel-slide-up-share-admin {
+    transition: all .15s ease-in-out;
+    height: 0;
+}
+
 /* about dialog */
 .about-content {
     min-width: 280px;