Expandable block content component with smooth transition

ExpandableBlockContent.vue

<template>
  <div class="block-content">
    <button
      type="button"
      class="block-content__button"
      aria-label="Toggle button"
      @click="isExpanded = !isExpanded"
    >
      {{ toggleCtaLabel }}
    </button>
    <transition
      @before-enter="onBeforeEnter"
      @enter="onEnter"
      @after-enter="onAfterEnter"
      @before-leave="onBeforeLeave"
      @leave="onLeave"
    >
      <p
        v-show="isExpanded"
        :class="{
          'block-content__paragraph': true,
          'block-content__paragraph--is-expanded': isExpanded,
        }"
        v-html="content"
      />
    </transition>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from "vue";

export default defineComponent({
  name: "ExpandableBlockContent",
  props: {
    content: { type: String },
  },
  setup() {
    const isExpanded = ref(true);

    const toggleCtaLabel = computed(() =>
      isExpanded.value ? "Collapse" : "Expand"
    );

    const onBeforeEnter = (el: Element) => {
      const htmlEl = el as HTMLElement;
      htmlEl.style.height = "0px";
    };
    const onEnter = (el: Element) => {
      const htmlEl = el as HTMLElement;
      htmlEl.style.height = el.scrollHeight + "px";
    };
    const onAfterEnter = (el: Element) => {
      const htmlEl = el as HTMLElement;
      htmlEl.style.overflow = "hidden";
    };
    const onBeforeLeave = (el: Element) => {
      const htmlEl = el as HTMLElement;
      htmlEl.style.height = `${el.scrollHeight}px`;
      htmlEl.style.overflow = "hidden";
    };
    const onLeave = (el: Element) => {
      const htmlEl = el as HTMLElement;
      htmlEl.style.height = "0px";
      htmlEl.style.overflow = "hidden";
    };

    return {
      isExpanded,
      toggleCtaLabel,
      onBeforeEnter,
      onEnter,
      onAfterEnter,
      onBeforeLeave,
      onLeave,
    };
  },
});
</script>

<style scoped>
.block-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;

  padding: 24px 20px;
  background-color: skyblue;
  border-radius: 8px;
}

.block-content__paragraph {
  color: white;
  overflow: hidden;
  transition: all 250ms ease-out;
  will-change: height;
}

.block-content__paragraph.block-content__paragraph--is-expanded {
  overflow: initial;
}

.block-content__button {
  color: white;
  text-decoration: underline;
}
</style>