가이드 · 05

등장, 퇴장, 레이아웃

떠나는 자식을 모션이 끝날 때까지 남기고, 컴포넌트를 넘나드는 위치·크기 변화를 애니메이션합니다.

Animated.Keep

Animated.Keep은 key가 있는 직계 자식을 depart 포즈가 끝날 때까지 남깁니다. seed={false}는 첫 렌더에 있던 자식을 pose에서 시작하게 하고, wait는 퇴장이 끝날 때까지 새 자식을 미루며, onDeparted는 마지막 퇴장 뒤에 호출됩니다.

예제를 준비하는 중…

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

App.jsx

import { useState } from 'react';
import { Animated } from '@kkwaenggwari/animated';
import './styles.css';

const departures = {
  up: { opacity: 0, transform: [{ translateY: -24 }] },
  side: { opacity: 0, transform: [{ translateX: 120 }] },
  shrink: { opacity: 0, transform: [{ scale: 0.6 }] },
};

let next = 4;

export default function App({ depart = 'side', wait = false }) {
  const [items, setItems] = useState([1, 2, 3]);

  const add = () => setItems((list) => [...list, next++]);
  const remove = (id) => setItems((list) => list.filter((item) => item !== id));

  // Scene + move: the messages below slide up when one leaves.
  return (
    <Animated.Scene tempo={{ spring: { stiffness: 320, damping: 30 } }}>
      <div className="stage">
        <button type="button" className="add" onClick={add}>
          Add message
        </button>
        <Animated.Keep wait={wait}>
          {items.map((id) => (
            <Animated.div
              key={id}
              move
              className="message"
              seed={{ opacity: 0, transform: [{ translateY: 16 }] }}
              pose={{ opacity: 1, transform: [{ translateY: 0 }] }}
              depart={departures[depart]}
              tempo={{ spring: { stiffness: 320, damping: 26 } }}
            >
              <span>Message #{id}</span>
              <button type="button" onClick={() => remove(id)}>
                Dismiss
              </button>
            </Animated.div>
          ))}
        </Animated.Keep>
      </div>
    </Animated.Scene>
  );
}

styles.css

.stage {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 320px;
  max-width: 420px;
  padding: 28px;
}

button {
  font: inherit;
  cursor: pointer;
}

.add {
  justify-self: start;
  min-height: 44px;
  margin-bottom: 8px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #2854ff;
  color: #fff;
  font-weight: 650;
}

.message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border: 1px solid #e4e6ef;
  border-radius: 14px;
  background: #fff;
}

.message button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #e4e6ef;
  border-radius: 999px;
  background: #f5f6fb;
  color: #16181d;
}

Animated.Scene과 move

Animated.Scene은 커밋된 레이아웃을 측정합니다. move가 있는 요소는 위치와 크기 변화를 애니메이션하고, move="pill" 같은 문자열은 한쪽이 언마운트되고 다른 쪽이 마운트되어도 Scene 안에서 같은 정체성의 요소를 이어 줍니다.

Scene은 그 요소들의 레이아웃 translate와 scale을 소유하므로 직접 쓰는 transform은 안쪽 요소에 두세요.

예제를 준비하는 중…

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

App.jsx

import { useState } from 'react';
import { Animated } from '@kkwaenggwari/animated';
import './styles.css';

const tabs = ['All', 'Motion', 'Layout', 'Input'];
const colors = ['#2854ff', '#8fb0ff', '#5c7cff', '#16181d', '#4a6bff', '#7d9bff'];

export default function App({ columns = 3, stiffness = 300, damping = 28 }) {
  const [tab, setTab] = useState('All');
  const [tiles, setTiles] = useState(colors);

  const shuffle = () => setTiles((list) => [...list.slice(1), list[0]]);

  return (
    <Animated.Scene tempo={{ spring: { stiffness, damping } }}>
      <div className="stage">
        <nav className="tabs">
          {tabs.map((name) => (
            <button key={name} type="button" onClick={() => setTab(name)}>
              {name === tab && <Animated.span className="pill" move="pill" />}
              <span className="label">{name}</span>
            </button>
          ))}
        </nav>
        <div className="tiles" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
          {tiles.map((color) => (
            <Animated.div key={color} move className="tile" style={{ background: color }} />
          ))}
        </div>
        <button type="button" className="shuffle" onClick={shuffle}>
          Rotate tiles
        </button>
      </div>
    </Animated.Scene>
  );
}

styles.css

.stage {
  display: grid;
  gap: 18px;
  padding: 28px;
}

button {
  font: inherit;
  cursor: pointer;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-self: start;
  padding: 4px;
  border-radius: 999px;
  background: #f5f6fb;
}

.tabs button {
  position: relative;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  background: none;
  color: #16181d;
}

.pill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #2854ff;
}

.label {
  position: relative;
}

.tabs button:has(.pill) .label {
  color: #fff;
}

.tiles {
  display: grid;
  gap: 10px;
  max-width: 420px;
}

.tile {
  height: 64px;
  border-radius: 14px;
}

.shuffle {
  justify-self: start;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid #e4e6ef;
  border-radius: 999px;
  background: #fff;
}

훅으로 쓰는 등장·퇴장

마운트를 직접 제어하고 싶다면 useAnimatedPresence(visible, { enter, exit })가 { mounted, animatedValue }를 돌려줍니다.

Toast.jsx

const { mounted, animatedValue } = useAnimatedPresence(open, {
  enter: (value) => spring(value, { toValue: 1 }),
  exit: (value) => timing(value, { toValue: 0, duration: 180 }),
});

return mounted ? <div style={{ opacity: animatedValue }}>Saved</div> : null;

React 밖에서

createLayoutScene은 같은 capture/commit 조율을 다른 렌더러나 직접 바꾸는 DOM에 제공합니다.

outside-react.js

const scene = createLayoutScene({ tempo: { spring: { stiffness: 320, damping: 30 } } });
const card = scene.attach(element, { key: 'card' });

scene.capture(); // before the DOM changes
list.prepend(element); // any renderer or manual DOM work
scene.commit(); // animates from the captured rectangles