Use x-transition in multiples elements

[patrickmaciel]

Hi guys.
First, I don't know if that's the correctly place to put that bug, because is a bug related to Livewire + Alpine.js. Maybe is just a Alpine.js but.

The bug is: when click in any link the respective dl with x-transition not hide/show.

That's my scenario:

<article x-data="{ tabAtual: 'processo'}">

<a x-on:click="tabAtual = 'processo'">Processo</a>
<a x-on:click="tabAtual = 'pessoais'">Pessoais</a>
<a x-on:click="tabAtual = 'anotacoes'">Negociação</a>
<a x-on:click="tabAtual = 'negociacao'">Negociação</a>

<!-- ... -->

<x-dl.dl x-show="tabAtual == 'processo'" x-transition>
</x-dl.dl>

<x-dl.dl x-show="tabAtual == 'pessoais'" x-transition>
</x-dl.dl>

<x-dl.dl x-show="tabAtual == 'anotacoes'" x-transition>
</x-dl.dl>

<x-dl.dl x-show="tabAtual == 'negociacao'" x-transition>
</x-dl.dl>

</article>

When I click in any link, the respective dl does not hide, BUT if I remove the x-transition or use x-show.transition works great.
Obs.: using x-show.transition does not apply any transition, is the same of using x-show only.

[joshhanley]

@patrickmaciel it looks more like an Alpine issue to me. I'd probably try reporting it on the Alpine forum first, and if it turns out that Livewire is causing it problems, then we can have a look into it 🙂

Hope this helps!

[walirazzaq]

I see that you are using blade components like x-dl.dl. What I think is causing issues in this case is x-transition attribute without any value. Laravel blade will render it like x-transition='x-transition' which is not valid in alpine. Try using x-transition='' in your x-dl.dl component instead of x-transition. It will direct blade compiler to not put value of x-transition same as x-transition

[joshhanley]

@walirazzaq ah good catch! 🙂 I didn't notice that

@patrickmaciel can you please test the suggestion above and let us know if it fixes your issue?

Thanks!