Life-cycle hooks for Transition component

[mitar]

Currently, when a component is inside a Transition component, component cannot easily know when the transition has finished and when it is fully shown to the user to do some followup changes.

<template>
  <Transition>
    <ComponentOne v-if="state == 'one'" />
    <ComponentTwo v-else-if="state == 'two' />
  </Transition>
</template>

So I would like that there are hooks inside ComponentOne and ComponentTwo which i could use to know how animations are progressing.

Use case

I want to focus input box after transition finishes. If I call focus too early it can interfere with the animation (preventScroll is sadly not supported on all browsers).

Workaround

One can add @transitionend and/or @animationend event handler(s) on the top element of the component, but that is fragile because component should not care if it is wrapped in Transition component or not, or if the Transition component is using animation or transitions. Maybe Transition is not using CSS to animate at all.

Precedence

KeepAlive built-in component calls onActivated/onDeactivated life-cycle hooks.

Suggestion

I would suggest that Transition also calls onLeaveTransition (before DOM element is transitioned out) and onEnterTransition (after DOM element is transitioned in) life-cycle hooks.

Alternatively, a full set of hooks could be exposed:

    onBeforeEnter?: Hook<(el: HostElement) => void>;
    onEnter?: Hook<(el: HostElement, done: () => void) => void>;
    onAfterEnter?: Hook<(el: HostElement) => void>;
    onEnterCancelled?: Hook<(el: HostElement) => void>;
    onBeforeLeave?: Hook<(el: HostElement) => void>;
    onLeave?: Hook<(el: HostElement, done: () => void) => void>;
    onAfterLeave?: Hook<(el: HostElement) => void>;
    onLeaveCancelled?: Hook<(el: HostElement) => void>;
    onBeforeAppear?: Hook<(el: HostElement) => void>;
    onAppear?: Hook<(el: HostElement, done: () => void) => void>;
    onAfterAppear?: Hook<(el: HostElement) => void>;
    onAppearCancelled?: Hook<(el: HostElement) => void>;

Currently those hooks are available on parent component, but not on child components. Having them on child components would make it possible to have children respond to animations as well.

[mitar]

I made a workaround for me. In parent component I register JavaScript hooks and define them as:

function callHook(el: Element, hook: string) {
  if ("__vue_exposed" in el) {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const exposed = el.__vue_exposed as Record<string, any> | null
    if (exposed && hook in exposed) {
      exposed[hook]()
    }
  }
}

function onAfterEnter(el: Element) {
  callHook(el, "onAfterEnter")
}

function onEnterCancelled(el: Element) {
  callHook(el, "onEnterCancelled")
}

function onBeforeLeave(el: Element) {
  callHook(el, "onBeforeLeave")
}

function onLeave(el: Element) {
  callHook(el, "onLeave")
}

function onAfterLeave(el: Element) {
  callHook(el, "onAfterLeave")
}

function onLeaveCancelled(el: Element) {
  callHook(el, "onLeaveCancelled")
}

In child components I do:

onMounted(() => {
  const vm = getCurrentInstance()!
  vm.vnode.el!.__vue_exposed = vm.exposeProxy
})

And then the child component can do:

defineExpose({
  onAfterEnter() {
    document.getElementById("form-field")?.focus()
  },
})

This approach does not support onBeforeEnter and onEnter callbacks because child's onMounted is not called in time (it is called after those two hooks would be called) to initialize link from DOM element to the component instance.

[jods4]

Partially related:
Previous discussions about the fact that onUnmounted runs before elements are removed from DOM in the presence of leave transitions:
vuejs/core#994

[mitar]

Oh, very interesting. Thanks for sharing.

I was also under the assumption that onUnmounted runs last, after onAfterLeave.

What if leave is cancelled? Is onMounted called again then? Or is component re-initialized?

[jods4]

Not sure what would happen... but can you even cancel a leave transition?
I believe the contract is that you can do whatever you want (e.g. run a JS animation) and eventually call the "done" callback.
I don't recall there's a way to "cancel" this... if your element is removed because of a v-if for example, there's no way to turn that v-if around from the transition.
Never calling the "done" callback seems ill-advised.

[mitar]

Of course you can cancel it. You reverse v-if back to the original value before transition completes.

You can see it mentioned in documentation under JS hooks.

[jods4]

oh sure, I don't know why I thought you meant like "from the transition".

I believe onLeaveCancelled and onMounted are called (please double-check, I'm not 100% sure).

To me, as onUnmounted has been called already, it wouldn't make sense to put the element "back" in the (V)DOM without calling onMounted.

[mitar]

So I tested it now and the regular order for leaving is:

• onBeforeLeave
• onLeave
• onUnmounted
• onAfterLeave

I am able to get onEnterCancelled called, but not onLeaveCancelled. If I do trigger leave cancellation, the transition is rushed to the end, and then it seems the component is reinitialized and regular enter transition is done with it. Maybe there is something specific to my code that makes it so (instead of calling cancelled and keeping the component around).