Transitions without x-for?

[karls]

Hi Alpinists!

I didn't know whether what I am about to discuss/ask would qualify as a feature request — perhaps it's possible already and I just don't know how.

I came across a situation where I want to use transitions without x-for. As far as I understand, that's not really possible currently. The situation I have is that there's a menu of items and selecting an item displays some data/contents somewhere else. I would like the display area to transition in and out smoothly as different items are selected. The current approach that works is to wrap the display are in a <transition x-for="item in [items[selectedItem]]"> which feels a bit hacky. I initially tried adding :key="selectedItem to the display area itself, thinking that it would trigger transitions as selectedItem changes.

I am basically asking:

1. is the approach that I've used "correct" in that there isn't a better/different way?, and
2. what do you think of the approach with just specifying :key="..." which would trigger transitions without x-for?

I've put together a codepen with some comments here: https://codepen.io/krlst/pen/zYrNpzb?editors=1010.

PS! After a bunch of time in SPA land I am exploring traditional server-rendered HTML pages with Alpine.js added in for interactivity. What a breath of fresh air!

[ryangjchandler]

Hi @karls - from what I can tell, adding an x-show to each of the "display areas" where the condition is selectedItem === 0, selectedItem === 1 should do the job too. You would still need to use a loop to output each of the items in items, unless you wanted to render those on the server directly.

The x-transition utilities are only used for showing & hiding / inserting & removing items from the DOM.

[karls]

Yep, that's what I found. Is there a reason why this is the case? E.g is there a reason why :key doesn't behave like :key in Vue, for instance?

[ryangjchandler]

Interesting, I've never actually used :key to force a refresh / change on an element in Vue.

[karls]

It works well in Vue. Now, Vue and Alpine are not the same, granted. I was just curious if there was a way to make it work in Alpine like it does in Vue. :-)

[ryangjchandler]

Interesting. Not sure it would fit into the scope of v2, but maybe something to consider for v3.

[karls]

Cool. Thanks for answering!