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 * as 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

@keyframes kf-x34h9adh {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

  to {
    opacity: 0;
  }
}

::view-transition-old(vt-xsq18f68) {
  animation-name: kf-xmzotw7h;
  animation-duration: 1.2s;
}

::view-transition-new(vt-xsq18f68) {
  animation-name: kf-x34h9adh;
  animation-duration: 1.2s;
}

.xa6j6hgv {
  view-transition-name: vt-xjp967de;
}

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