Transition with x-for

[Borsuk7]

Is it possible to have a transition on x-for when an element is added and removed (like TransitionGroup in Vue)
I use such a hack for now:

<div x-data="itemList">
  <button @click="insert">Insert at random index</button>
  <button @click="reset">Reset</button>
  <div class="container">
    <template x-for="item in items" :key="item">
      <div
        class="item"
        x-data="transitionElement(remove, item)"
        x-bind="element"
      >
        <span x-text="item"></span>
        <button x-bind="removeElement">x</button>
      </div>
    </template>
  </div>
</div>

import './style.css';
import Alpine from 'alpinejs';

window.Alpine = Alpine;

const getInitialItems = () => [1, 2, 3, 4, 5];

Alpine.data('itemList', () => ({
  items: [],
  id: 0,
  init() {
    this.reset();
  },
  insert() {
    const i = Math.round(Math.random() * this.items.length);
    this.items.splice(i, 0, this.id++);
  },
  reset() {
    this.items = getInitialItems();
    this.id = this.items.length + 1;
  },
  async remove(item, beforeRemoveCallback) {
    await beforeRemoveCallback();
    const i = this.items.indexOf(item);
    if (i > -1) {
      this.items.splice(i, 1);
    }
  },
}));

Alpine.data('transitionElement', () => ({
  show: false,
  init() {
    this.$nextTick(() => (this.show = true));
  },
  element: {
    'x-transition.duration.300ms'() {},
    'x-show.important'() {
      return this.show;
    },
  },
  removeElement: {
    async '@click'() {
      await this.remove(this.item, async () => {
        this.show = false;
        await new Promise((resolve) => setTimeout(resolve, 300));
      });
    },
  },
}));

Alpine.start();

Here is the StackBlitz: https://js-paru51.stackblitz.io https://stackblitz.com/edit/js-paru51?file=index.js
But it would be great if it could work by default like this:

<div x-data="itemList">
  <button @click="insert">Insert at random index</button>
  <button @click="reset">Reset</button>
  <div class="container">
    <template x-for="item in items" :key="item" x-transition.duration.300ms> <!-- or x-transition-group.duration.300ms --> // 
      <div class="item">
        <span x-text="item"></span>
        <button @click="remove(item)">x</button>
      </div>
    </template>
  </div>
</div>

import './style.css';
import Alpine from 'alpinejs';

window.Alpine = Alpine;

const getInitialItems = () => [1, 2, 3, 4, 5];

Alpine.data('itemList', () => ({
  items: [],
  id: 0,
  init() {
    this.reset();
  },
  insert() {
    const i = Math.round(Math.random() * this.items.length);
    this.items.splice(i, 0, this.id++);
  },
  reset() {
    this.items = getInitialItems();
    this.id = this.items.length + 1;
  },
  remove(item) {
    const i = this.items.indexOf(item);
    if (i > -1) {
      this.items.splice(i, 1);
    }
  },
}));

Alpine.start();

Do you have any ideas on how it can be implemented? I'd be happy to contribute to such an update

[james0r]

This would be a nice feature. Just playing around with $watch https://codepen.io/James0r/pen/dyaMgWx but yours is more eloquent.

[Borsuk7]

I'll check out how it's done in Vue. Might get some ideas from there

[PierreTurnbull]

Hi, any update on this?
Currently I'm using custom animations but it would be simpler to use Alpine's transition system.
I also found a hack to use transitions in for-loops : https://stackoverflow.com/a/70301505/8993709