@empathyco/x-components
Version:
Empathy X Components
37 lines (24 loc) • 1.37 kB
Markdown
title: CollapseHeight
# CollapseHeight
Renders a transition wrapping the element passed in the default slot and animating
it with a height animation.
## Props
| Name | Description | Type | Default |
| ------------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------- |
| <code>appear</code> | Indicates if the transition must be applied on the initial render of the node. | <code>boolean</code> | <code>true</code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) to add content to the transition | None |
## Examples
The CollapseHeight component is intended to be used as animation to wrap an element with v-if or
v-show and animate it. The animation consists on scale its height size from 0 to auto. This
transition does not work with components that have vertical margin, padding or border.
Used wrapping a component:
```vue
<CollapseHeight>
<ComponentOrElement v-if="open"/>
</CollapseHeight>
```