viewTransition

Use this when you want to customize the default cross-fade of a View Transition. It returns a unique view-transition-name.

type ViewTransitionOptions = {
  group?: CSSProperties;
  imagePair?: CSSProperties;
  new?: CSSProperties;
  old?: CSSProperties;
};

function viewTransition(options: ViewTransitionOptions): string;

Example

TypeScript

import { css } from '@plumeria/core';

const fadeIn = css.keyframes({
  from: { opacity: 0 },
  to: { opacity: 1 },
});

const fadeOut = css.keyframes({
  from: { opacity: 1 },
  to: { opacity: 0 },
});

const longCrossFade = css.viewTransition({
  old: {
    animationName: fadeOut,
    animationDuration: '1.2s',
  },
  new: {
    animationName: fadeIn,
    animationDuration: '1.2s',
  },
});

export const transition = css.create({
  name: {
    viewTransitionName: longCrossFade,
  },
});

CSS

/* The keyframes for fadeIn and fadeOut are also generated */
@keyframes kf-xa1rkjwc {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes kf-x1b77wlr {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

::view-transition-old(vt-x164pf11) {
  animation: 1.2s ease-in-out kf-x1b77wlr; /* from fadeOut */
}

::view-transition-new(vt-x164pf11) {
  animation: 1.2s ease-in-out kf-xa1rkjwc; /* from fadeIn */
}

Usage with React

Since it returns a view-transition-name, you apply it to the element that should animate.

React ViewTransition

import { unstable_ViewTransition as ViewTransition } from 'react';
import { transition } from './animation';

<ViewTransition name={transition.name}>
  {/* ... */}
</ViewTransition>

viewTransition

Example

Usage with React

On this page