# view-transitions-api-utils

> The simplest native method to achieve smooth element shared layout animations.

Latest version **0.1.1** (published 2023-12-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install view-transitions-api-utils
pnpm add view-transitions-api-utils
yarn add view-transitions-api-utils
bun add view-transitions-api-utils
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2023-12-15 |
| First published | 2023-12-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | u3u |
| Maintainers | u3u |
| Keywords | auto transition, flip animation, shared layout transition, view-transitions |

## Links

- npm: https://www.npmjs.com/package/view-transitions-api-utils
- Repository: https://github.com/u3u/view-transitions-api-utils
- Homepage: https://github.com/u3u/view-transitions-api-utils#readme
- Issues: https://github.com/u3u/view-transitions-api-utils/issues
- npm.io page: https://npm.io/package/view-transitions-api-utils

## Alternatives

- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads
- [cra-template-particles-typescript](https://npm.io/package/cra-template-particles-typescript.md) — 227 weekly downloads

## Recent versions

- 0.1.1 (latest) — 2023-12-15
- 0.1.0 — 2023-12-15
- 0.0.1 — 2023-12-10

## README

# view-transitions-api-utils

> The simplest native method to achieve smooth element shared layout animations.

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![JSDocs][jsdocs-src]][jsdocs-href]
[![License][license-src]][license-href]

## Install

```sh
pnpm add view-transitions-api-utils
```

## Usage

Just set the CSS `view-transition-name`, leave the rest to `document.startViewTransition()`.

```ts
import { startViewTransition } from 'view-transitions-api-utils';

await startViewTransition(() => {
  // updateDOM
}).finished;
```

### React

```tsx
import { useTransitionState } from 'view-transitions-api-utils/react';

const App = () => {
  const [showContent, setShowContent] = useTransitionState(false);

  return (
    <div onClick={() => setShowContent((show) => !show)}>
      <h1 style={{ viewTransitionName: 'title' }}>Title</h1>
      {showContent && <div style={{ height: 100, viewTransitionName: 'content' }}>Content</div>}
      <p style={{ viewTransitionName: 'tips' }}>Tips</p>
    </div>
  );
};
```

### Vue

> 💡 You can encapsulate a hook yourself.

```ts
import { startViewTransition } from 'view-transitions-api-utils';

await startViewTransition(
  () => {
    // update state
    // for example: `count.value++`;
  },
  { flushSync: Vue.nextTick },
).finished;
```

### Native demo

This code can be used to find a list on any website, select a sub-item from the list, and then execute it in the console to see the effect.

```ts
((el) => {
  // eslint-disable-next-line unicorn/no-array-for-each
  [...el.parentElement.children].forEach((item, index) => {
    item.style.viewTransitionName = `item${index}`;
  });

  document.startViewTransition(() => {
    el.style.display = el.style.display === 'none' ? '' : 'none';
  });
})($0);
```

### Guide

https://developer.chrome.com/docs/web-platform/view-transitions

## License

[MIT](./LICENSE) License © 2023 [u3u](https://github.com/u3u)

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/view-transitions-api-utils
[npm-version-href]: https://npmjs.com/package/view-transitions-api-utils
[npm-downloads-src]: https://img.shields.io/npm/dm/view-transitions-api-utils
[npm-downloads-href]: https://npmjs.com/package/view-transitions-api-utils
[bundle-src]: https://img.shields.io/bundlephobia/minzip/view-transitions-api-utils?label=minzip
[bundle-href]: https://bundlephobia.com/result?p=view-transitions-api-utils
[jsdocs-src]: https://paka.dev/badges/v0/cute.svg
[jsdocs-href]: https://paka.dev/npm/view-transitions-api-utils
[license-src]: https://img.shields.io/github/license/u3u/view-transitions-api-utils.svg
[license-href]: ./LICENSE

---
_Source: https://npm.io/package/view-transitions-api-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._