CollapseHeight

Renders a transition wrapping the element passed in the default slot and animating it with a height animation.

Props

Name	Description	Type	Default
appear	Indicates if the transition must be applied on the initial render of the node.	boolean	true

Slots

Name	Description	Bindings (name - type - description)
default	(Required) to add content to the transition	None

Examples

The CollapseHeight component is intended to be used as an animation to wrap an element with v-if or v-show and animate its height. The animation scales its height from 0 to auto. This transition does not work with components that have vertical margin, padding, or border.

Basic example using v-if

<template>
  <CollapseHeight>
    <ComponentOrElement v-if="open" />
  </CollapseHeight>
</template>
<script setup>
import { ref } from 'vue'
import CollapseHeight from '@empathyco/x-components/js/components/animations/collapse-height.vue'
const open = ref(false)
</script>

Usage with v-show

<template>
  <CollapseHeight>
    <ComponentOrElement v-show="open" />
  </CollapseHeight>
</template>
<script setup>
import { ref } from 'vue'
import CollapseHeight from '@empathyco/x-components/js/components/animations/collapse-height.vue'
const open = ref(true)
</script>

Example with dynamic content

<template>
  <div>
    <button @click="open = !open">Toggle</button>
    <CollapseHeight>
      <div v-if="open" style="height: 200px; background: #eee;">Expanded content</div>
      <div v-else style="height: 50px; background: #ccc;">Collapsed content</div>
    </CollapseHeight>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import CollapseHeight from '@empathyco/x-components/js/components/animations/collapse-height.vue'
const open = ref(false)
</script>