AnimateWidth

Renders a transition wrapping an element passed in the default slot and animating its width.

Slots

Name	Description	Bindings (name - type - description)
default	(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:

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

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