Skip to content

Commit e480b08

Browse files
majorimimajorimi
authored
Merge pull request #100 from majorimi/fix/collapse-animation
Updated CollapsePanel animation when heigh is Auto CSS cannot calcula…
2 parents 09b34f1 + 550d552 commit e480b08

File tree

7 files changed

+65
-36
lines changed

7 files changed

+65
-36
lines changed

‎.github/docs/Collapse.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,13 @@ Sets the `style` of the `background-color` when tab is not the Active tab. Use H
4242
- **`HoverColor`: `string { get; set; }` (default: "WhiteSmoke") - Required** <br />
4343
Sets the `style` of the `background-color` when button is hovered over with mouse. Use HTML specified: **Color Names**, **RGB**, **HEX** or with **HSL** values.
4444
- **`ContentHeight`: `int { get; set; }` (default: 200) - Required** <br />
45-
Sets the height of Content panel in `px`. 0 is auto.
45+
Sets the height (in reality sets max-height because of CSS transition issues) of Content panel in `px`. 0 is auto.
46+
- **`MaxAllowedContentHeight`: `int { get; set; }` (default: 200) - Required** <br />
47+
Sets the max-height if Content panel `ContentHeight` is set to 0 (auto).
4648
- **`Animate`: `bool { get; set; }` (default: true)** <br />
4749
Determines to apply CSS animation and transition on Collapse state changes or not.
48-
**Note: in case of `auto` height some animation won't work.**
50+
**Note: in case of Content panel `ContentHeight` is set to 0 (auto), then use `MaxAllowedContentHeight` to set max-height CSS property which will be animated.
51+
Also important based on max-height value transition speed for expand/collapse might differ!.**
4952
- **`Disabled`: `bool { get; set; }` (default: false)** <br />
5053
Determines whether the rendered HTML `<input>` element should be disabled or not.
5154
- **`InnerElementReference`: `ElementReference { get; }`** <br />

‎src/Majorsoft.Blazor.Components.Collapse.Tests/CollapsePanelTest.cs‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ public void CollapsePanel_should_rendered_correctly_html_attributes()
2727
var id = div.FirstElementChild.GetAttribute("id");
2828
div.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" title=""text"" >
2929
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);"" ></div>
30-
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; height: 200px;"" ></div>
30+
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; max-height: 200px;"" ></div>
3131
</div>");
3232
}
3333

@@ -43,7 +43,7 @@ public void CollapsePanel_should_rendered_correctly_Disabled()
4343
var id = div.GetAttribute("id");
4444
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" disabled="""" >
4545
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);"" ></div>
46-
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; height: 200px;"" ></div>
46+
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; max-height: 200px;"" ></div>
4747
</div>");
4848
}
4949

@@ -61,13 +61,13 @@ public void CollapsePanel_should_rendered_correctly_CommonHeader()
6161
var id = div.GetAttribute("id");
6262
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
6363
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);"">Common header</div>
64-
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; height: 200px;"" ></div>
64+
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; max-height: 200px;"" ></div>
6565
</div>");
6666

6767
div.Click();
6868
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
6969
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);"">Common header</div>
70-
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; height: 0px;"" ></div>
70+
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; max-height: 0px;"" ></div>
7171
</div>");
7272
}
7373

@@ -83,13 +83,13 @@ public void CollapsePanel_should_rendered_correctly_ExpandedHeaderContent()
8383
var id = div.GetAttribute("id");
8484
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
8585
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);"">Expanded header</div>
86-
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; height: 200px;"" ></div>
86+
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; max-height: 200px;"" ></div>
8787
</div>");
8888

8989
div.Click();
9090
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
9191
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);""></div>
92-
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; height: 0px;"" ></div>
92+
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; max-height: 0px;"" ></div>
9393
</div>");
9494
}
9595

@@ -105,13 +105,13 @@ public void CollapsePanel_should_rendered_correctly_CollapsedHeaderContent()
105105
var id = div.GetAttribute("id");
106106
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
107107
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);""></div>
108-
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; height: 200px;"" ></div>
108+
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; max-height: 200px;"" ></div>
109109
</div>");
110110

111111
div.Click();
112112
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
113113
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);"">Collapsed header</div>
114-
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; height: 0px;"" ></div>
114+
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; max-height: 0px;"" ></div>
115115
</div>");
116116
}
117117

@@ -128,13 +128,13 @@ public void CollapsePanel_should_rendered_correctly_ExpandedColor()
128128
var id = div.GetAttribute("id");
129129
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
130130
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(255,0,0);"">Expanded header</div>
131-
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; height: 200px;"" ></div>
131+
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; max-height: 200px;"" ></div>
132132
</div>");
133133

134134
div.Click();
135135
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
136136
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);""></div>
137-
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; height: 0px;"" ></div>
137+
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; max-height: 0px;"" ></div>
138138
</div>");
139139
}
140140

@@ -151,13 +151,13 @@ public void CollapsePanel_should_rendered_correctly_CollapsedColor()
151151
var id = div.GetAttribute("id");
152152
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
153153
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);""></div>
154-
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; height: 200px;"" ></div>
154+
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; max-height: 200px;"" ></div>
155155
</div>");
156156

157157
div.Click();
158158
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
159159
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(255,0,0);"">Collapsed header</div>
160-
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; height: 0px;"" ></div>
160+
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; max-height: 0px;"" ></div>
161161
</div>");
162162
}
163163

@@ -173,27 +173,27 @@ public async Task CollapsePanel_should_rendered_correctly_HoverColor()
173173
var id = div.GetAttribute("id");
174174
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
175175
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);""></div>
176-
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; height: 200px;"" ></div>
176+
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; max-height: 200px;"" ></div>
177177
</div>");
178178

179179
await div.TriggerEventAsync("onmouseenter", new MouseEventArgs());
180180
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
181181
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(255,0,0);""></div>
182-
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; height: 200px;"" ></div>
182+
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; max-height: 200px;"" ></div>
183183
</div>");
184184
await div.TriggerEventAsync("onmouseleave", new MouseEventArgs());
185185

186186

187187
div.Click();
188188
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
189189
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);""></div>
190-
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; height: 0px;"" ></div>
190+
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; max-height: 0px;"" ></div>
191191
</div>");
192192

193193
await div.TriggerEventAsync("onmouseenter", new MouseEventArgs());
194194
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
195195
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(255,0,0);""></div>
196-
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; height: 0px;"" ></div>
196+
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; max-height: 0px;"" ></div>
197197
</div>");
198198
}
199199

@@ -211,14 +211,14 @@ public void CollapsePanel_should_rendered_correctly_Content()
211211
var id = div.GetAttribute("id");
212212
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
213213
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);"">Expanded header</div>
214-
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; height: 200px;"" >Content...</div>
214+
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; max-height: 200px;"" >Content...</div>
215215
</div>");
216216

217217
rendered.SetParametersAndRender(parameters => parameters
218218
.Add(p => p.Collapsed, true));
219219
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
220220
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);"">Collapsed header</div>
221-
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; height: 0px;"" >Content...</div>
221+
<div class=""collapseContent animate"" style=""opacity: 0; overflow: hidden; max-height: 0px;"" >Content...</div>
222222
</div>");
223223
}
224224

@@ -234,7 +234,7 @@ public void CollapsePanel_should_rendered_correctly_ContentHeight()
234234
var id = div.GetAttribute("id");
235235
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
236236
<div id=""{id}"" class=""collapseHeader animate"" style=""background-color: rgb(211,211,211);"" ></div>
237-
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; height: 55px;"" ></div>
237+
<div class=""collapseContent animate"" style=""opacity: 1; overflow: hidden; max-height: 55px;"" ></div>
238238
</div>");
239239
}
240240

@@ -250,7 +250,7 @@ public void CollapsePanel_should_rendered_correctly_Animate()
250250
var id = div.GetAttribute("id");
251251
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
252252
<div id=""{id}"" class=""collapseHeader"" style=""background-color: rgb(211,211,211);"" ></div>
253-
<div class=""collapseContent"" style=""opacity: 1; overflow: hidden; height: 200px;"" ></div>
253+
<div class=""collapseContent"" style=""opacity: 1; overflow: hidden; max-height: 200px;"" ></div>
254254
</div>");
255255
}
256256

@@ -267,7 +267,7 @@ public void CollapsePanel_should_rendered_correctly_ShowContentOverflow()
267267
var id = div.GetAttribute("id");
268268
rendered.MarkupMatches(@$"<div class=""collapsePanel"" tabindex=""200"" >
269269
<div id=""{id}"" class=""collapseHeader"" style=""background-color: rgb(211,211,211);"" ></div>
270-
<div class=""collapseContent"" style=""opacity: 1; overflow: auto; height: 200px;"" ></div>
270+
<div class=""collapseContent"" style=""opacity: 1; overflow: auto; max-height: 200px;"" ></div>
271271
</div>");
272272
}
273273
}

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}
1212
</div>
1313
<div class="collapseContent @(Animate ? "animate" : "")"
14-
style="opacity: @(Collapsed ? "0" : "1"); overflow: @(ShowContentOverflow ? "auto" : "hidden"); height: @GetContentHeight()">
14+
style="opacity: @(Collapsed ? "0" : "1"); overflow: @(ShowContentOverflow ? "auto" : "hidden"); max-height: @GetContentHeight()">
1515
@Content
1616
</div>
1717
</div>
@@ -83,10 +83,16 @@
8383
}
8484

8585
/// <summary>
86-
/// Sets the height of Content panel in `px`. 0 is auto.
86+
/// Sets the height (in reality sets max-height because of CSS transition issues) of Content panel in `px`. 0 is auto.
8787
/// </summary>
8888
[Parameter] public int ContentHeight { get; set; } = 200;
8989

90+
/// <summary>
91+
/// Sets the max-height if Content panel <see cref="ContentHeight"/> is set to 0 (auto).
92+
/// https://css-tricks.com/using-css-transitions-auto-dimensions/
93+
/// </summary>
94+
[Parameter] public int MaxAllowedContentHeight { get; set; } = 200;
95+
9096
/// <summary>
9197
/// Determines whether all the rendered HTML elements should be disabled or not.
9298
/// </summary>
@@ -114,7 +120,8 @@
114120

115121
/// <summary>
116122
/// Determines to apply CSS animation and transition on Collapse state changes or not.
117-
/// Note: in case of `auto` height some animation won't work.
123+
/// Note: in case of Content panel <see cref="ContentHeight"/> is set to 0 (auto), then use <see cref="MaxAllowedContentHeight"/> to set max-height CSS property which will be animated.
124+
/// Also important based on max-height value transition speed for expand/collapse might differ!
118125
/// </summary>
119126
[Parameter] public bool Animate { get; set; } = true;
120127

@@ -158,7 +165,7 @@
158165
return "0px;";
159166
}
160167

161-
return ContentHeight <= 0 ? "auto;" : $"{ContentHeight}px;";
168+
return ContentHeight <= 0 ? $"{MaxAllowedContentHeight}px;" : $"{ContentHeight}px;";
162169
}
163170
private string GetStyle()
164171
{

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,11 @@
2222
}
2323

2424
.collapseContent {
25+
height: auto;
2526
outline: none;
2627
display: block;
2728
}
2829
.collapseContent.animate {
29-
-webkit-transition: opacity 1s, height 0.4s; /* For Safari 3.1 to 6.0 */
30-
transition: opacity 1s, height 0.4s;
30+
-webkit-transition: opacity 1s, max-height 0.8s; /* For Safari 3.1 to 6.0 */
31+
transition: opacity 1s, max-height 0.8s;
3132
}

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Majorsoft.Blazor.Components.Collapse/Majorsoft.Blazor.Components.Collapse.xml‎

Lines changed: 9 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Majorsoft.Blazor.Components.TestApps.Common/Components/Collapse.razor‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,20 @@
3636
</div>
3737
<div class="row pb-2">
3838
<div class="col-12 col-lg-8 col-xl-5">
39-
CollapsePanel content Height (0 is auto): @(_height)px
39+
Collapse Panel Content Height (0 is auto): @(_height)px
4040
<input type="range" class="w-100" min="0" max="400" @bind="_height" @oninput="(e => _height = int.Parse(e.Value?.ToString()))" />
4141
</div>
4242
</div>
43+
<div class="row pb-2">
44+
<div class="col-12 col-lg-8 col-xl-5">
45+
Collapse Panel Max Content Height (only when Content Height is 0 "auto" and collapse Animated Note: animation speed depends on max-height): @(_maxHeight)px
46+
<input type="range" class="w-100" min="0" max="800" disabled="@(_height != 0 || !_isAnimated)" @bind="_maxHeight" @oninput="(e => _maxHeight = int.Parse(e.Value?.ToString()))" />
47+
</div>
48+
</div>
4349

4450
<div class="row pb-2">
4551
<div class="col-12 col-lg-8 col-xl-5">
46-
CollapsePanel Disabled: <input class="mr-3" type="checkbox" @bind="_isCollapseDisabled" />
52+
Collapse Panel Disabled: <input class="mr-3" type="checkbox" @bind="_isCollapseDisabled" />
4753
Collapsed: <input class="mr-3" type="checkbox" @bind="_isCollapsed" />
4854
<br />
4955
Animate Collapse changes: <input class="mr-3" type="checkbox" @bind="_isAnimated" />
@@ -60,6 +66,7 @@
6066
Disabled="@_isCollapseDisabled"
6167
Collapsed="@_isCollapsed"
6268
ContentHeight="@_height"
69+
MaxAllowedContentHeight="@_maxHeight"
6370
Animate="@_isAnimated"
6471
ShowContentOverflow="@_showOverflow"
6572
OnCollapseChanged="OnCollapsed">
@@ -100,8 +107,11 @@
100107
<h3>Multiple CollapsePanel items</h3>
101108
<p>
102109
Example usage of multiple independent <code>CollapsePanel</code>s with default settings.
103-
<br />
104-
<strong>Note</strong>: content <code>height: auto</code> prevents some CSS animation to work.
110+
<br />
111+
<span class="pt-1 text-muted">
112+
<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.
113+
Also important <strong>based on max-height value transition speed for expand/collapse might differ!</strong>
114+
</span>
105115
</p>
106116

107117
<CollapsePanel ContentHeight="0" style="margin-bottom: 10px;">
@@ -335,6 +345,7 @@
335345
private bool _isCollapsed = false;
336346
private bool _showOverflow = false;
337347
private int _height = 200;
348+
private int _maxHeight = 200;
338349

339350
private ElementReference _log;
340351
private string _collapseLog;

0 commit comments

Comments
 (0)