Re: [w3ctag/design-reviews] Shared Element Transitions API (Issue #748)

Here's a demo created in Vue https://8trrx7.csb.app/ (runs in Chrome Canary with the document transition flag).

Here's the code https://codesandbox.io/s/busy-kepler-8trrx7?file=/src/App.vue.


Assuming this is how you'd increment a number in Vue:

```js
export default {
  data: () => ({
    num: 1,
  }),
  methods: {
    incrementNum() {
      this.num += 1;
    }
  }
};
```

Here's how you'd increment it with a transition:

```js
import { nextTick } from "vue";

export default {
  data: () => ({
    num: 1,
  }),
  methods: {
    incrementNum() {
      const update = () => (this.num += 1);

      if (!self.SameDocumentTransition) {
        update();
        return;
      }

      new SameDocumentTransition().prepare(async () => {
        update();
        await nextTick();
      });
    },
  },
};
```

This seems… fine? Much easier than it was in React anyway, but maybe I'm holding it wrong? I've never written anything in Vue before, so maybe I'm breaking some best practices.

A Vue helper could be created for this:

```js
import { nextTick } from "vue";

export function transitionStateChange(stateChangeCallback) {
  if (!self.SameDocumentTransition) {
    stateChangeCallback();
    return;
  }

  new SameDocumentTransition().prepare(async () => {
    stateChangeCallback();
    await nextTick();
  });
}
```

Which could be used like this:

```js
export default {
  data: () => ({
    num: 1,
  }),
  methods: {
    incrementNum() {
      transitionStateChange(() => (this.num += 1));
    },
  },
};
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/748#issuecomment-1226996104

You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/748/1226996104@github.com>