Updated CollapsePanel animation when heigh is Auto CSS cannot calculate transition speeed. So need to animate max-height but it requires grater value then "auto" value...

https://css-tricks.com/using-css-transitions-auto-dimensions/

Author: majorimi

src/Majorsoft.Blazor.Components.Collapse/CollapsePanel.razor

@@ -11,7 +11,7 @@
 		}
 	</div>
 	<div class="collapseContent @(Animate ? "animate" : "")"
-		 style="opacity: @(Collapsed ? "0" : "1"); overflow: @(ShowContentOverflow ? "auto" : "hidden"); height: @GetContentHeight()">
+		 style="opacity: @(Collapsed ? "0" : "1"); overflow: @(ShowContentOverflow ? "auto" : "hidden"); max-height: @GetContentHeight()">
 		@Content
 	</div>
 </div>
@@ -83,10 +83,16 @@
 	}
 
 	/// <summary>
-	/// Sets the height of Content panel in `px`. 0 is auto.
+	/// Sets the height (in reality sets max-height because of CSS transition issues) of Content panel in `px`. 0 is auto.
 	/// </summary>
 	[Parameter] public int ContentHeight { get; set; } = 200;
 
+	/// <summary>
+	/// Sets the max-height if Content panel <see href="ContentHeight"> is set to 0 (auto).
+	/// https://css-tricks.com/using-css-transitions-auto-dimensions/
+	/// </summary>
+	[Parameter] public int MaxAllowedContentHeight { get; set; } = 200;
+
 	/// <summary>
 	/// Determines whether all the rendered HTML elements should be disabled or not.
 	/// </summary>
@@ -114,7 +120,8 @@
 
 	/// <summary>
 	/// Determines to apply CSS animation and transition on Collapse state changes or not.
-	/// Note: in case of `auto` height some animation won't work.
+	/// Note: in case of Content panel <see href="ContentHeight"> is set to 0 (auto), then use <see href="MaxAllowedContentHeight"> to set max-height CSS property which will be animated.
+	/// Also important based on max-height value transition speed for expand/collapse might differ!
 	/// </summary>
 	[Parameter] public bool Animate { get; set; } = true;
 
@@ -158,7 +165,7 @@
 			return "0px;";
 		}
 
-		return ContentHeight <= 0 ? "auto;" : $"{ContentHeight}px;";
+		return ContentHeight <= 0 ? $"{MaxAllowedContentHeight}px;" : $"{ContentHeight}px;";
 	}
 	private string GetStyle()
 	{

src/Majorsoft.Blazor.Components.Collapse/CollapsePanel.razor.css

@@ -22,10 +22,11 @@
 }
 
 .collapseContent {
+	height: auto;
 	outline: none;
 	display: block;
 }
 .collapseContent.animate {
-	-webkit-transition: opacity 1s, height 0.4s; /* For Safari 3.1 to 6.0 */
-	transition: opacity 1s, height 0.4s;
+	-webkit-transition: opacity 1s, max-height 0.8s; /* For Safari 3.1 to 6.0 */
+	transition: opacity 1s, max-height 0.8s;
 }

src/Majorsoft.Blazor.Components.Collapse/CollapsePanel.razor.min.css

@@ -36,14 +36,20 @@
 	</div>
 	<div class="row pb-2">
 		<div class="col-12 col-lg-8 col-xl-5">
-			CollapsePanel content Height (0 is auto): @(_height)px
+			Collapse Panel Content Height (0 is auto): @(_height)px
 			<input type="range" class="w-100" min="0" max="400" @bind="_height" @oninput="(e => _height = int.Parse(e.Value?.ToString()))" />
 		</div>
 	</div>
+		<div class="row pb-2">
+		<div class="col-12 col-lg-8 col-xl-5">
+			Collapse Panel Max Content Height (only when Content Height is 0 "auto" and collapse Animated Note: animation speed depends on max-height): @(_maxHeight)px
+			<input type="range" class="w-100" min="0" max="800" disabled="@(_height != 0 || !_isAnimated)" @bind="_maxHeight" @oninput="(e => _maxHeight = int.Parse(e.Value?.ToString()))" />
+		</div>
+	</div>
 
 	<div class="row pb-2">
 		<div class="col-12 col-lg-8 col-xl-5">
-			CollapsePanel Disabled: <input class="mr-3" type="checkbox" @bind="_isCollapseDisabled" />
+			Collapse Panel Disabled: <input class="mr-3" type="checkbox" @bind="_isCollapseDisabled" />
 			Collapsed: <input class="mr-3" type="checkbox" @bind="_isCollapsed" />
 			<br />
 			Animate Collapse changes: <input class="mr-3" type="checkbox" @bind="_isAnimated" />
@@ -60,6 +66,7 @@
 						   Disabled="@_isCollapseDisabled"
 						   Collapsed="@_isCollapsed"
 						   ContentHeight="@_height"
+						   MaxAllowedContentHeight="@_maxHeight"
 						   Animate="@_isAnimated"
 						   ShowContentOverflow="@_showOverflow"
 						   OnCollapseChanged="OnCollapsed">
@@ -100,8 +107,11 @@
 			<h3>Multiple CollapsePanel items</h3>
 			<p>
 				Example usage of multiple independent <code>CollapsePanel</code>s with default settings. 
-				<br />																										 
-				<strong>Note</strong>: content <code>height: auto</code> prevents some CSS animation to work.
+				<br />
+				<span class="pt-1 text-muted">
+					<strong class="text-danger">Note</strong>: in case of Content panel <code>ContentHeight</code> is set to 0 (auto), then use <code>MaxAllowedContentHeight</code> to set max-height CSS property which will be animated.
+					Also important <strong>based on max-height value transition speed for expand/collapse might differ!</strong>
+				</span>
 			</p>
 
 			<CollapsePanel ContentHeight="0" style="margin-bottom: 10px;">
@@ -335,6 +345,7 @@
 	private bool _isCollapsed = false;
 	private bool _showOverflow = false;
 	private int _height = 200;
+	private int _maxHeight = 200;
 
 	private ElementReference _log;
 	private string _collapseLog;