MotionPresence

나타나고 사라지는 동안 내용을 마운트한 채 유지합니다.

웹React Native내용과 크기

직접 해 보기

예제를 준비하는 중…

JavaScript가 꺼져 있습니다. 아래 코드가 예제 전체입니다.

App.jsx

import { useState } from 'react';
import { MotionPresence } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const exits = {
  rise: { opacity: 0, translateY: -16 },
  fall: { opacity: 0, translateY: 16 },
  shrink: { opacity: 0, scale: 0.9 },
};

export default function App({ exit = 'rise', duration = 320 }) {
  const [visible, setVisible] = useState(true);
  const [saved, setSaved] = useState(1);

  const save = () => {
    setSaved(saved + 1);
    setVisible(true);
  };

  return (
    <div className="stage">
      <div className="slot">
        <MotionPresence
          present={visible}
          exit={exits[exit]}
          transition={{ duration, easing: 'easeOut' }}
          className="notice"
        >
          <span>Draft {saved} saved</span>
          <button onClick={() => setVisible(false)}>Dismiss</button>
        </MotionPresence>
      </div>
      <div className="buttons">
        <button onClick={save}>Save draft</button>
        <button onClick={() => setVisible(!visible)}>{visible ? 'Hide' : 'Show'} notice</button>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 40px 20px;
}

.slot {
  display: grid;
  place-items: center;
  min-height: 64px;
  width: min(100%, 420px);
}

.notice {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border-radius: 14px;
  background: #0e2e24;
  color: #fff;
}

.notice button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: none;
  color: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.buttons button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons button:first-child {
  border-color: #176b52;
  background: #176b52;
  color: #fff;
}

가장 짧은 사용법

Notice.jsx

<MotionPresence present={visible} exit={{ opacity: 0, translateY: -12 }}>
  Draft saved
</MotionPresence>;

대신 처리하는 일

마운트를 해제하는 대신 present를 바꾸세요. 내용이 사라진 뒤에 제거됩니다.
사라지는 도중 되돌리면 현재 값에서 이어갑니다.
다시 나타나는 내용은 exit 자세에서 들어옵니다.
첫 렌더는 제자리에 멈춘 상태라 이미 있던 내용이 깜박이지 않습니다.

이럴 때 쓰세요

임시 저장 알림.
결제 화면의 쿠폰 안내.
입력칸 아래 오류 메시지.

Props

Prop	타입	기본값	설명
`present`	`boolean`	`—`필수	내용을 보이거나 숨깁니다. 마운트를 해제하는 대신 이것을 바꾸세요.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	머무는 자세.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	사라질 때의 자세이자 다시 들어올 때의 출발 자세.
`as`	`element`	`'div'`	그릴 요소.
`transition`	`Transition`	`spring`	시간 곡선 `{ duration, easing }` 또는 스프링 `{ tempo: 'spring', spring }`. 스프링은 끊겨도 속도를 이어갑니다.
`onExitComplete`	`() => void`		내용이 사라져 제거된 뒤 실행됩니다.

그 밖의 props는 그려지는 요소로 전달되므로 className, style, 이벤트 핸들러를 평소처럼 쓸 수 있습니다.

웹과 React Native

자세에는 opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width, height를 씁니다. onExitComplete는 내용이 사라진 뒤 실행됩니다.

React Native에서도 같은 자세와 props가 동작합니다.

이 컴포넌트를 쓰는 예제

결제 요약장바구니가 바뀌면 수량·줄 합계·총액이 구르고, 쿠폰 안내가 들어오고 나가며, 결제는 의도적으로 길게 눌러야 합니다.MotionListMotionNumberMotionPresenceMotionHold