ChangeHeight

Slots

Name	Description	Bindings (name - type - description)
default		None

Examples

The ChangeHeight component automatically animates its content's height when its size changes.

Basic example

<template>
  <ChangeHeight>
    <div>Content whose height will be animated</div>
  </ChangeHeight>
</template>
<script setup>
import ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'
</script>

Example with dynamic content

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