stylex.viewTransitionClass

Creates a set of ::view-transition pseudo-element rules tied to a single class name which can be utilized for customizing the animations in a View Transition.

The styles that viewTransitionClass accepts don't currently support media queries but adding support for them is a planned enhancement.

type ViewTransitionClassOptions = Readonly<{
  group?: RawStyles;
  imagePair?: RawStyles;
  old?: RawStyles;
  new?: RawStyles;
}>;
function viewTransitionClass(options: ViewTransitionClassOptions): string;

The options object the viewTransitionClass function takes in accepts the following keys which map to a corresponding View Transition pseudo-element:

group -> ::view-transition-group(*.theGeneratedClass)
imagePair -> ::view-transition-image-pair(*.theGeneratedClass)
old -> ::view-transition-old(*.theGeneratedClass)
new -> ::view-transition-new(*.theGeneratedClass)

This method returns the generated class name as a string which can be added manually to the elements you want animations customized for, or if you're using React can be passed into the experimental <ViewTransition /> component.

Example use:

import * as stylex from '@stylexjs/stylex';
import { unstable_ViewTransition as ViewTransition } from 'react';

const lingeringOldView = stylex.viewTransitionClass({
  new: {
    animationDuration: '1s',
  },
  old: {
    animationDuration: '2s',
  },
});

<ViewTransition default={lingeringOldView}>{/* ... */}</ViewTransition>;

viewTransitionClass calls can also accept keyframes output to customize the animations even further:

import * as stylex from '@stylexjs/stylex';

const fadeInUp = stylex.keyframes({
  from: {
    opacity: 0,
    transform: 'translateY(-30px)',
  },
  to: {
    opacity: 1,
    transform: 'translateY(0px)',
  },
});

const transitionCls = stylex.viewTransitionClass({
  new: {
    animationName: fadeInUp,
  },
});