Step transitions

[loranger]

Hi,

I struggle to implement transitions between steps.
I tried using wire:loading but there's a flickering between finished loading and next step display
I tried to hook alpine x-transition, but I miss an unloading event

Does someone already achieved this ?

[ju5t]

I don't think this is possible. It's all Livewire. Unless you can hook into the dom diffing mechanism of Livewire you'd have a hard time.

Perhaps https://github.com/glhd/alpine-wizard is a better option if you need to css transitions.

[loranger]

Thanks for your advice, I'll take a look at this client side solution

[seche]

I'm having the same issue. Seems like nextStep() makes the current step component hydrate and re-render before it goes to the next step.

[seche]

Workaround was for me was to intercept the 3 events in the wizard.blade file using:

@script
<script>
    $wire.on('nextStep', (step) => {
        // Apply loading state
       loading(step)
    });

    $wire.on('previousStep', (step) => {
        // Apply loading state
       loading(step)
    });

    $wire.on('showStep', (step) => {
        // Apply loading state
       loading(step)
    });

    function loading(step) {
        // Apply DOM changes to display loading state
    }

     // Catch the next step and apply entry transition
    Livewire.hook('component.init', ({ component, cleanup }) => {
        // Apply initial DOM changes to new step
    })
</script>
@endscript

And then apply changes to the DOM for my loading state that remains until the livewire step is removed and the new step is loaded.

I also used the $this->skipRender(); inside my step's actions for a better transition.