Wait Transition to finish before showing x-show

[surjithctly]

Hello,

I have a strange issue while trying to animate Tabs. I have 3 buttons for tabs, and 3 div's to display content. But when I add transition to the content. It breaks. See the below fiddle to see what I mean.

https://jsfiddle.net/0mv8husn/1/

How do I let other tab wait for the transition to finish before showing?

I have seen the pull #177 but this is not working.

View Code

 <div x-data="{ open: 'tab1' }">
   <button @click.prevent="open= 'tab1'">
     Open Tab 1
   </button>

   <button @click.preventk="open= 'tab2'">
     Open Tab 2
   </button>

   <button @click.prevent="open= 'tab3'">
     Open Tab 3
   </button>

   <div x-show="open === 'tab1'">
     Hey I'm tab 01
     <div x-show="open === 'tab1'" x-transition:enter-start="opacity-0 scale-90" x-transition:enter="ease-out transition-slow" x-transition:enter-end="opacity-100 scale-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave="ease-in transition-slow" x-transition:leave-end="opacity-0 scale-90">
       I'm transitioning 01
     </div>
   </div>

   <div x-show="open === 'tab2'">
     Hey I'm tab 02
     <div x-show="open === 'tab2'" x-transition:enter-start="opacity-0 scale-90" x-transition:enter="ease-out transition-slow" x-transition:enter-end="opacity-100 scale-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave="ease-in transition-slow" x-transition:leave-end="opacity-0 scale-90">
       I'm transitioning 02
     </div>
   </div>

   <div x-show="open === 'tab3'">
     Hey I'm tab 03
     <div x-show="open === 'tab3'" x-transition:enter-start="opacity-0 scale-90" x-transition:enter="ease-out transition-slow" x-transition:enter-end="opacity-100 scale-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave="ease-in transition-slow" x-transition:leave-end="opacity-0 scale-90">
       I'm transitioning 03
     </div>
   </div>
 </div>

[surjithctly]

I guess this issue is related to another PR #713

@MuzafferDede Can you test with this example for your PR?

@calebporzio If yes, possible to merge above PR fast?

[MuzafferDede]

The solution to your issue is actually applying delay to your transitions. (you don't have it in your code above), even tho current alpine version does support x-transition class defined delays, there is still some bugs with it. Yes, #713 will fix this bug and you could have something like this:

View Code

.delay-1000 {
    transition-delay: 1s;
}

 <div x-data="{ open: 'tab1' }">
   <button @click.prevent="open= 'tab1'">
     Open Tab 1
   </button>

   <button @click.prevent="open= 'tab2'">
     Open Tab 2
   </button>

   <button @click.prevent="open= 'tab3'">
     Open Tab 3
   </button>

   <div x-show="open === 'tab1'">
     Hey I'm tab 01
     <div x-show="open === 'tab1'" x-transition:enter-start="opacity-0 scale-90" x-transition:enter="ease-out transition-slow delay-1000" x-transition:enter-end="opacity-100 scale-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave="ease-in transition-slow" x-transition:leave-end="opacity-0 scale-90">
       I'm transitioning 01
     </div>
   </div>

   <div x-show="open === 'tab2'">
     Hey I'm tab 02
     <div x-show="open === 'tab2'" x-transition:enter-start="opacity-0 scale-90" x-transition:enter="ease-out transition-slow delay-1000" x-transition:enter-end="opacity-100 scale-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave="ease-in transition-slow" x-transition:leave-end="opacity-0 scale-90">
       I'm transitioning 02
     </div>
   </div>

   <div x-show="open === 'tab3'">
     Hey I'm tab 03
     <div x-show="open === 'tab3'" x-transition:enter-start="opacity-0 scale-90" x-transition:enter="ease-out transition-slow delay-1000" x-transition:enter-end="opacity-100 scale-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave="ease-in transition-slow" x-transition:leave-end="opacity-0 scale-90">
       I'm transitioning 03
     </div>
   </div>
 </div>

[surjithctly]

@MuzafferDede For your code to work, need the code in PR? Because I have added delay as you said. But not working?

https://jsfiddle.net/h5mjd78o/

How can I make it work now? because I guess @calebporzio may take time to merge this.

[SimoTod]

That PR won't fix your issue (at leats not so easily). There is a bit of misunderstanding, I think.
#177 works as expected and there aren't any bugs there. Your problem is actually the opposite, you see a broken layout because, when hiding, the parent x-show waits for the child to complete.
This is because the 3 tabs with x-show are at the same level.
When you click on a tab link, the new tab shows but the old one takes 1 seconds to hide because it's waiting for the child to complete.

Not sure what it's the desired output but I believe that you only need x-transition-enter (https://codepen.io/SimoTod/pen/XWdpKpG)

If you really want to do something complicated like click > old tab content fades out > switch tab(hide old and show new) > new content fade in, then you need to code something more sophisticated.
You can base your logic on multiple variables so 2 tab animations won't trigger at the same time.
You could wait for that PR to be merged in and add more logic(the previous suggestion is not enough. You need to apply a transition with a delay to the parent tans as well and make sure all times match).
I'm sure there are different solution as well but nothing out of the box.

As a separate note, I would suggest to avoid things like "Maintainer, please merge it fast" in the future. The maintainer and the rest of the team receive email whenever a ticket or a discussion is open (this thread would be a discussion more than a bug, for instance) and this kind of sentences comes across badly.
A PR won't be merged quickly because a single person ask for it, it still needs to be reviewed, tested and scheduled for the next release to make sure the new code won't break any existing functionality for the rest of the community.

Let me know if the above suggestion helped.

[MuzafferDede]

@surjithctly #713 contains improvements and an edge case bug fix on transition(there is a ms gap which cause break on animations).

As i said earlier current version does support what you need imo. But it could be in multiple approach. The one commonly used it what @SimoTod suggested in the codepen sample. Usually we skip the in animation on tabs to have a smooth switch. If you want to go in - out transition animations, #713 will make it more flexible and solid.

If you are in rush for some reason, you could use sponsorship on github to reach out Caleb's help in person.

One of the sponsor package includes

• 1.5 hours of personal Livewire/Alpine consulting per month via video call
• Bugfix priority (if there's a bug you need to be fixed, it gets bumped to the top of the pile)

[surjithctly]

@SimoTod I'm using similar to what you shared on codepen now. But I think an in built solution would be perfect.

And sorry for asking to merge fast. New to this community 😊

@MuzafferDede Yes. I'm using similar to the codepen now.

[TheRealThor]

I have the same behaviour when doing transition(in and out) with x-show where the expression is evaluated more than one time, like in the example with tabs.

 <div x-show.transition = "activeTab === 1">Test1 </div>
 <div x-show.transition = "activeTab === 2">Test2 </div>
 <div x-show.transition = "activeTab === 3">Test3</div>

This will briefly show Test3 displaced underneath Test2, when activeTab becomes 3 and was 2 before. This is because the change in activeTab triggers two transitions concurrently and hence is displacing Test3 until Test2 was put to "display: none" after the transitions ended. In jQuery I addressed this behaviour with:

$('#tab1').fadeTo('slow',0).attr("style", "display: none");

which faded the DOM object out before it was set to display none. Afterwards another object could be faded in.

I guess this could be a solution:
x-show checks if the left part of an expression is more than once to be evaluated. If so, x-show transition will fire first where the expression(s) turned from true to false. Only once this element was put to "display: none" the transitions should be started on the DOM object(s) where the expression turned from false to true. Maybe the EventListener with 'transionend' can help here?