---
title: "invalid-view-transition-use"
description: "Reports extra or invalid arguments to .for() of a view transition."
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.

# invalid-view-transition-use

This rule reports a `.for()` call with more than one argument, or with a key that
is not a string or a number. One `.for()` call names one element, so extra
arguments do not name more elements.

## Reported

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

> invalid-view-transition-use: viewTransition.for() accepts at most one key expression
> 
> Example:2:7

## Fixed

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

## How to fix

- Give each element its own `.for()` call with its own key, as in the example.
- Use a string or a number as the key, such as the ID of the item.

See [style.viewTransition()](/docs/macros/view-transition#name-the-element).

## Rule settings

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

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

Source: https://stillwind.dev/docs/lints/invalid-view-transition-use/index.mdx