Possible to know when x-show/x-transition have completed showing or hiding the element?

[nikitaourazbaev]

Is it possible to be notified or run a callback when x-show has completed showing or hiding the element?

I’m looking for a definitive way to know when something has been shown or hidden, regardless of whether transitions are used. Something that covers the cases of x-show with or without x-transition, and when x-transition is used, when a duration is set either with CSS classes or with the duration modifier. Ideally I would like to cover all of these without having to check whether a transition is being used.

Does Alpine know when the transition is complete? And is it possible to hook into that somehow?

[ekwoka]

When a transition happens, transitionend event is dispatched, this is native behavior. It won't happen when there is no transition.

You can use some code to tap into element internals, and, after x-show/x-transition is registered, wrap el._x_doShow in another function that also does whatever you want and put that in it's place.

Is there a reason why you'd want to hook into the action in the dom and not onto the values themselves?

There's a few different ways to do the general idea of knowing when the show evaluates, but which makes sense depends on why you want to do it in the first place.

[asbjornu]

I just had a use for this by invoking focus() on an <input> within a <div> decorated with x-show, to focus the <input> element immediately after the <div> is shown:

<div x-show="…" x-cloak x-transition @transitionend.once="$refs.title.focus()">
    <label>
        Title
        <input x-model="title" type="text" name="title" x-ref="title">
    </label>
</div>

It works, which is great. It was just now that I learned that transitionend is a core CSS event and not something specific to Alpine.js. Which sort of explains why I couldn't find any documentation about transitionend in the Alpine.js documentation. But perhaps a little mention of it and the other transition… events on the x-transition directive page would be a good idea?

Alternatively, an Alpine.js-specific x-on:show event would be very useful. As @nikitaourazbaev, I'm not necessarily in need of x-transition to show the above <div>, I just found adding x-transition to be the easiest way to have x-on:transitionend to give the <input> focus work reliably.

Or is there perhaps a completely different way to do this in Alpine.js?

[nikitaourazbaev]

@asbjornu I think the Focus plugin should work pretty well for this.

[mynona]

Yes, that would be great if the x-on:show event could be extended. I agree. Would make much more sense.

@nikitaourazbaev The Focus plugin itself cannot handle it and I was looking for weeks for a solution and happily I found this work around with transitioned now.

[ekwoka]

Alternatively, use x-if and then x-init on the element in question.

[nikitaourazbaev]

What I ended up doing in one of the cases where I needed this, is awaiting a promise of all animations’ finished promises from getAnimations() inside a try / catch statement. This will wait until all transitions on an element are completed, and will work whether the element has a transition or not.

I haven’t shared this because I think it’s pretty specific to my use case but maybe this will help someone.

You need to already know that the transition will happen (maybe with a $watch on the thing that causes the x-show to toggle or with an event), and you need to have a reference to the element with the x-show element that is being shown / hidden (here it’s el).

try {
  await Promise.all(
    el.getAnimations().map((animation) => animation.finished)
  );

  runOnOpen();
} catch (e) {
  runOnOpen();
}

[ludwig-gramberg]

I had the same problem. I needed to know when all content panels in an accordion had finished changing their visibility (changed by x-show) in order to scroll to the currently open one.
I ended up using a mutation observer and making the elements distinguishable by a custom attribute.
this will work as long as alpine does not change how it applies x-show.

// this is code is run inside the init-function of the component

const debounceScroll = window.Alpine.debounce(() => {  
    
    myScrollMethod()
    
}, 100)
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if( mutation.type === 'attributes' && 
            mutation.attributeName === 'style' &&
            mutation.target.hasAttribute('data-accordion-content')
        ) {
            debounceScroll()
        }
    })
})
observer.observe(this.$root, {
    attributeFilter: ['style'],
    subtree: true,
})