---
title: "missing-view-transition-name"
description: "Reports a view transition applied without .for()."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# missing-view-transition-name

This rule reports a `style()` call that applies a view transition without
`.for()`. The transition adds its class, but the element has no
`view-transition-name`, so the browser does not capture it.

## Reported

```tsx
const transition = style.viewTransition({ old: "duration-150" });
style(transition);
```

> missing-view-transition-name: a view transition class without a name does not participate; add .for(key) or declare view-transition-name
> 
> Example:2:1

## Fixed

```tsx
const transition = style.viewTransition({ old: "duration-150" });
style(transition.for("card"));
```

## How to fix

- Call `.for()` with a key that stays the same for the item before and after the
  update, such as its ID.
- When the call combines several transitions, call `.for()` on one of them.

The rule does not check that keys are unique across the page.

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | warn |
| `strict` | deny |
| `stylistic` | off |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/missing-view-transition-name/index.mdx