<script>
import { defineComponent } from "vue";
import { getStyleProperty } from "@grozav/utils";
export default defineComponent({
  name: "IExpandTransition",
  setup() {
    function onEnter(componentElement) {
      const element = componentElement;
      const width = getStyleProperty(element, "width");
      element.style.width = width;
      element.style.position = "absolute";
      element.style.visibility = "hidden";
      element.style.height = "auto";
      const height = element.offsetHeight;
      element.style.width = "";
      element.style.position = "";
      element.style.visibility = "";
      element.style.height = "0";
      setTimeout(() => {
        element.style.height = `${height}px`;
      });
    }
    function onAfterEnter(componentElement) {
      const element = componentElement;
      element.style.height = "auto";
    }
    function onLeave(componentElement) {
      const element = componentElement;
      const height = element.offsetHeight;
      element.style.height = `${height}px`;
      setTimeout(() => {
        element.style.height = "0";
      });
    }
    return {
      onEnter,
      onAfterEnter,
      onLeave
    };
  }
});
</script>

<template>
    <transition name="expand" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave">
        <slot />
    </transition>
</template>
