Accordion: animate content height on open/close

[bogdan0083]

Hey guys! Is it possible to animate accordion item content height on toggle? I know how to animate the node, but how can I listen to toggle event for each item?

Thank you!

[bogdan0083]

I managed to figure out how to animate accordion item content height by myself.

1. Wrap your item content element inside Transition component. Please note that I also added v-if to make sure transition enter/leave functions will be triggered:

      <Transition @enter="onEnter" @leave="onLeave">
        <div
          v-bind="api.getItemContentProps({ value: item.title })"
          class="text-xs overflow-hidden"
          ref="itemContentRefs"
          v-if="api.value.includes(item.title)"
        >
          <div class="py-3 px-4">
            {{ item.content }}
          </div>
        </div>
      </Transition>

2. Add functions onEnter and onLeave:

const onTransitionEnd = (node, done) => {
  node.classList.remove("accordion-transitioning");
  node.removeEventListener("transitionend", onTransitionEnd, false);
  done();
};

const onEnter = (node, done) => {
  const h = node.clientHeight;

  node.style.height = "0px";

  setTimeout(() => {
    node.classList.add("accordion-transitioning");
    node.style.height =  h + "px";
    node.addEventListener("transitionend", () => onTransitionEnd(node, done));
  }, 0);
};

const onLeave = (node, done) => {
  const h = node.clientHeight;

  node.style.height = h + "px";

  setTimeout(() => {
    node.classList.add("accordion-transitioning");
    node.style.height = "0px";
    node.addEventListener("transitionend", () => onTransitionEnd(node, done));
  }, 0);
};

The code is quite repetitive and not very DRY, but it works just fine!

I hope someone finds it useful 😄