AlpineJS transitions not working properly

sage
1

Hey everyone,
Thought I would try out AlpineJs with sage 9. It looks like everything is working correctly except the transition property. I am just trying to get this little code block to fade on click, however, the transition property doesn’t appear to be doing anything.

<div class="" x-data="{show: true}">
<div style="height: 100px;">
  <h1 x-show.transition="show">TEST</h1>
</div>
<button @click="show = ! show">Click</button>

I have tried downgrading AlpineJS as well as deleting node modules and re-installing everything. I can’t find any S.O. topics on this, so I am wondering if this is sage specific.

Any help is greatly appreciated. I am running the latest version of AlpineJS

2

Did you tried
<h1 x-show="show" x-transition>TEST</h1>
?

3

This topic was automatically closed after 42 days. New replies are no longer allowed.