Skip to main content

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.

note

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,
  },
});