README
@zestia/ember-expander
Transitioning an element from a zero height to it's actual height is not possible to do with pure CSS, unless you know the height in advance.
This component automatically sets max-height
, so that you can style transitions to that height.
Installation
ember install @zestia/ember-expander
Demo
https://zestia.github.io/ember-expander/
Notes
- This addon intentionally does not come with any styles.
- You can nest Expanders.
- Content is not rendered when collapsed, which results in faster rendering.
Example
<Expander as |expander|>
<button {{on "click" expander.toggleWithTransition}}>
Toggle
</button>
<expander.Content>
Hello World
</expander.Content>
</Expander>
Further explanation
When expanding, max-height
goes from:
- none (collapsed)
- zero (transitioning)
- scroll height (transitioning)
- none (expanded)
When collapsing, max-height
goes from:
- none (expanded)
- scroll height (transitioning)
- zero (transitioning)
- none (collapsed)
Notice that the max-height
style is only present for the duration of the transition.
This is so that if the contents of your element change it can still grow or shrink to fit that new content - without causing an additional transition.