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

React ViewTransition

import { unstable_ViewTransition as ViewTransition } from 'react';
 
<ViewTransition name={transition.name}>
  {/* ... */}
</ViewTransition>

Next next-link-transitions

import { Link } from 'next-link-transitions';
 
<Link href={href} viewTransitionName={transition.name}>
  {name}
</Link>

viewTransition

Example

On this page