[JENKINS-37007] fix a bug where expand/collapse animation did not work by using max-height instead of height; adjust timing

blueocean-personalization/src/main/js/components/DashboardCards.jsx

@@ -166,10 +166,8 @@ export class DashboardCards extends Component {
         return (
             <div className="favorites-card-stack">
                 <TransitionGroup transitionName="vertical-expand-collapse"
-                  transitionAppear
-                  transitionAppearTimeout={300}
-                  transitionEnterTimeout={300}
-                  transitionLeaveTimeout={300}
+                  transitionEnterTimeout={150}
+                  transitionLeaveTimeout={150}
                 >
                     {favoriteCards}
                 </TransitionGroup>

blueocean-personalization/src/main/less/extensions.less

@@ -13,23 +13,23 @@
 }
 
 .vertical-expand-collapse-enter {
-    transition: all ease-out 0.3s;
-    height: 0;
+    transition: all linear 0.15s;
+    max-height: 0;
     opacity: 0.01;
 
     &.vertical-expand-collapse-enter-active {
-        height: auto;
+        max-height: 60px;
         opacity: 1;
     }
 }
 
 .vertical-expand-collapse-leave {
-    transition: all ease-out 0.3s;
-    height: auto;
+    transition: all linear 0.15s;
+    max-height: 60px;
     opacity: 1;
 
     &.vertical-expand-collapse-leave-active {
-        height: 0;
+        max-height: 0;
         opacity: 0.01;
     }
 }