---

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>
```