@empathyco/x-components
Version:
Empathy X Components
66 lines (49 loc) • 1.38 kB
Markdown
---
title: AnimateWidth
---
# AnimateWidth
Renders a transition wrapping an element passed in the default slot and animating its width.
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) Transition content | None |
## Examples
The AnimateWidth component is intended to be used as a prop in animatable components but also works
as a transition to animate the width of an element.
Used as a prop in an animatable component:
```vue
<template>
<AnimatableComponent :animation="AnimateWidth" />
</template>
<script>
import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'
export default {
data() {
return {
AnimateWidth,
}
},
}
</script>
```
Used as a regular Transition:
```vue
<template>
<div>
<button @click="visible = !visible">Toggle</button>
<AnimateWidth>
<div v-if="visible" style="width: 300px">Element to animate</div>
</AnimateWidth>
</div>
</template>
<script>
import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'
export default {
data() {
return {
visible: true,
}
},
}
</script>
```