Alpine: Transition animation using x-cloak

Created on 31 Aug 2020 · 14Comments · Source: alpinejs/alpine

Firstly, thanks for the awesome library! I've very much been enjoying using it alongside Phoenix LiveView and TailwindCSS.

I noticed an interesting bug when using x-cloak along with transitions. The problem being that the animation would only occur the second time around and after. The first time around the text would just appear with no animation. The fix is to add style="display: none;" to the markup and the animation would then occur the first time as well.

For example, I am creating a pricing page with a monthly/yearly price toggle. The following code would omit the first animation:

<span                                                     
  class="font-extrabold"                                  
  x-show="yearly_membership_plan"                         
  x-transition:enter="transition ease-out duration-500"   
  x-transition:enter-start="opacity-0 transform scale-50" 
  x-transition:enter-end="opacity-100 transform scale-100"
  x-cloak
>                                                         
  419                                                     
</span>                                                   
<span                                                     
  class="font-extrabold"                                  
  x-show="!yearly_membership_plan"                        
  x-transition:enter="transition ease-out duration-500"   
  x-transition:enter-start="opacity-0 transform scale-50" 
  x-transition:enter-end="opacity-100 transform scale-100"
>                                                         
  39                                                      
</span>

While the following code would animate as expected:

<span                                                     
  class="font-extrabold"                                  
  x-show="yearly_membership_plan"                         
  x-transition:enter="transition ease-out duration-500"   
  x-transition:enter-start="opacity-0 transform scale-50" 
  x-transition:enter-end="opacity-100 transform scale-100"
  style="display: none;"                                  
>                                                         
  419                                                     
</span>                                                   
<span                                                     
  class="font-extrabold"                                  
  x-show="!yearly_membership_plan"                        
  x-transition:enter="transition ease-out duration-500"   
  x-transition:enter-start="opacity-0 transform scale-50" 
  x-transition:enter-end="opacity-100 transform scale-100"
>                                                         
  39                                                      
</span>

Thanks in advance for any assistance! Appreciate it :)

Source

akoutmos

Most helpful comment

Sorry for the delay. @SimoTod I gave that a shot this evening and still no animation the first x-show toggle. I think the best thing to do is for me to create a bare bones Elixir Phoenix app with my setup reproducing the issue given I can't get it to repro in codepen....but using webpack and going through a full build it seems to be an issue. I'll post back in a few days with a repo showing the issue.

akoutmos on 6 Sep 2020

👍3

All 14 comments

Have you added the x-cloak style rule in your CSS (or better yet inlined within the <head>)?

<head>
    <style>
        [x-cloak] { display: none; }
    </style>
</head>

KevinBatdorf on 31 Aug 2020

Speedy response! Yup. It has been added to my CSS file, else I would see the two prices side by side. Is there logic in Alpine that switches based on display: none but not x-cloak? This looks like it also needs a check for the x-cloak attribute if I am following correctly: https://github.com/alpinejs/alpine/blob/master/src/directives/show.js#L27

akoutmos on 31 Aug 2020

Is this set up right? They both function the same as far as I can tell

https://codepen.io/KevinBatdorf/pen/e37bb8db4687283eb462355807628a53?editors=1010

KevinBatdorf on 31 Aug 2020

Line 27 that you mention isn't run during initial load. The code just above that is. It will just remove the style attribute or update the display property (if more style rules exist than display). x-cloak is removed a bit later. Both should be in the same state after Alpine has fully loaded.

Maybe something else is interfering? Do you have something in x-init? I'd have to check the Alpine source to be sure, but I believe x-init might run after the style attribute is removed and before x-cloak is removed. So something there could be doing something extra. Edit: It goes x-show then x-cloak removed, then x-init

Can you reproduce the issue on CodePen or elsewhere to share?

KevinBatdorf on 31 Aug 2020

That doesn't seem to be functioning the same as my local machine. When I load up that codepen, both of those divs already have the display: none style set:

Versus my local app DOM looks like this on initial load:

I'll see if I can get a CodePen to repro it. Also using the Chrome Animations dev tools shows that the animation is skipped the first time around (until the x-cloak is replaced with display: none)

akoutmos on 31 Aug 2020

What version of Alpine are you using?

KevinBatdorf on 31 Aug 2020

Version 2.6.0

akoutmos on 31 Aug 2020

As far as I remember, it's the expected behavior. x-cloak is evaluated/removed last regardless the order. This is to avoid blips when x-show resolves to false (js engine only run 1 instruction at each time if x-cloak were removed first before x-show is evaluated, the div will show for a short time then disappear again).

SimoTod on 31 Aug 2020

@SimoTod That was added I think in 2.5 or maybe 2.6 even. @akoutmos it might be worth running Alpine.version in the browser console just to confirm 2.6.0 is loading in.

KevinBatdorf on 31 Aug 2020

Yeah, I think it was added recently so if he use 2.6 it's expected.

@akoutmos x-cloak only exists to hide elements before the component is initialised but it's not meant to set a default status for x-show.

That animation can be implemented with a separate variable loaded initialised to false and changed to true in x-init. X-show directive can then use that variable in AND. Alternative the inline css rule mentioned at the top without x-cloak would work but it's less Alpine-ish. :)

x-init="() => loaded = true"x-show="yearly_membership_plan && loaded"`

SimoTod on 31 Aug 2020

👍1

Thanks for the tip @SimoTod. I'll give that a whirl tomorrow and report back :)

akoutmos on 1 Sep 2020

👍1

@akoutmos How did you get on with what @SimoTod suggested?