---
title: "split-view-transition-class"
description: "Reports view transitions split across separate style() calls."
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.

# split-view-transition-class

This rule reports view transitions that reach one element through separate
`style()` calls, such as a base style and the call that receives it. Each call
sets the whole `view-transition-class` list, so one list replaces the other.

## Reported

```tsx
const first = style.viewTransition({ old: "duration-150" });
const second = style.viewTransition({ new: "duration-150" });
const base = style(first.for("card"));
style(base, second);
```

> split-view-transition-class: view-transition-class is one property: this call's list replaces the one its composed base declares, so declare the transitions in one call
> 
> Example:4:1

## Fixed

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

## How to fix

Pass every transition of the element to the same `style()` call, with one
`.for()`, as in the example. You can still store and share the transition
definitions themselves.

## 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/split-view-transition-class/index.mdx