viewTransition()

File: styled-system/css/view-transition
Import: import { viewTransition } from '../styled-system/css'

viewTransition() returns a shared class built on view-transition-class. Panda can extract and dedupe that class like any other atomic style. You still set a unique view-transition-name yourself (framework-specific).

import { viewTransition } from '../styled-system/css'
 
const slide = viewTransition({
  group: {
    animationDuration: '0.4s',
    animationTimingFunction: 'ease-in-out'
  },
  imagePair: { isolation: 'isolate' },
  old: { opacity: 0 },
  new: { opacity: 1 }
})
// => "vt_xxx"

Pseudo-elements you can style: group, imagePair, old, new (mapped to the corresponding ::view-transition-* selectors).

Why a separate helper

View transition names must be unique per element. If styles were keyed on the name, Panda could not share CSS. view-transition-class is the CSS feature meant for shared animation styles; this helper emits that class.

Full guide

Framework wiring, pseudo-elements, and named transitions: View Transitions in the Styling tab.

See also

• css()
• Styled System overview