アニメーション

CSSキーフレームまたは任意のJavaScriptアニメーションライブラリを使用して、Radixプリミティブをアニメーション化します。

Radixプリミティブへのアニメーションの追加は、他のコンポーネントと同様に感じるはずですが、JSアニメーションライブラリを使用した終了アニメーションに関するいくつかの注意点があります。

CSSアニメーションを使用したアニメーション

プリミティブをアニメーション化するための最も簡単な方法はCSSを使用することです。

マウントフェーズとアンマウントフェーズの両方をアニメーション化するためにCSSアニメーションを使用できます。後者は、Radixプリミティブがアニメーションが再生される間、アンマウントを中断するため可能です。

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.DialogOverlay[data-state='open'],
.DialogContent[data-state='open'] {
  animation: fadeIn 300ms ease-out;
}

.DialogOverlay[data-state='closed'],
.DialogContent[data-state='closed'] {
  animation: fadeOut 300ms ease-in;
}

多くのステートフルなプリミティブが表示から非表示になると、実際にはReactツリーから削除され、その要素はDOMから削除されます。JavaScriptアニメーションライブラリはアンマウントフェーズを制御する必要があります。そのため、多くのコンポーネントにforceMountプロップを提供し、コンシューマーがこれらのライブラリによって決定されたアニメーションの状態に基づいて子のマウントとアンマウントを委譲できるようにします。

たとえば、React Springを使用してDialogをアニメーション化したい場合、アニメーションの状態に基づいて、useTransitionのようなフックのいずれかからダイアログのOverlayとContent部分を条件付きでレンダリングすることによって行います。

import * as Dialog from '@radix-ui/react-dialog';
import { useTransition, animated, config } from 'react-spring';

function Example() {
  const [open, setOpen] = React.useState(false);
  const transitions = useTransition(open, {
    from: { opacity: 0, y: -10 },
    enter: { opacity: 1, y: 0 },
    leave: { opacity: 0, y: 10 },
    config: config.stiff,
  });
  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      {transitions((styles, item) =>
        item ? (
          <>
            <Dialog.Overlay forceMount asChild>
              <animated.div
                style={{
                  opacity: styles.opacity,
                }}
              />
            </Dialog.Overlay>
            <Dialog.Content forceMount asChild>
              <animated.div style={styles}>
                <h1>Hello from inside the Dialog!</h1>
                <Dialog.Close>close</Dialog.Close>
              </animated.div>
            </Dialog.Content>
          </>
        ) : null
      )}
    </Dialog.Root>
  );
}

前へスタイリング

次へコンポジション

GitHubでこのページを編集する。

概要

ガイド

コンポーネント

ユーティリティ

アニメーション

CSSアニメーションを使用したアニメーション

JavaScriptアニメーションのアンマウントの委譲