共有ギャラリー

タイルが詳細ビューへと大きくなり、グリッドへ縮んで戻ります。

Animated.SceneAnimated.Keepmove

サンプルを準備中…

JavaScript がオフになっています。下のコードがサンプルの全体です。

App.jsx

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

const places = [
  {
    id: 'dune',
    title: 'Dune',
    color: '#2854ff',
    text: 'Wind moves the ridge a little every night.',
  },
  { id: 'reef', title: 'Reef', color: '#5c7cff', text: 'Clear water over a shallow shelf.' },
  { id: 'aurora', title: 'Aurora', color: '#8fb0ff', text: 'Curtains of light above the fjord.' },
  {
    id: 'basalt',
    title: 'Basalt',
    color: '#16181d',
    text: 'Columns cooled from an old lava flow.',
  },
  {
    id: 'lagoon',
    title: 'Lagoon',
    color: '#7d9bff',
    text: 'A calm bay behind the barrier island.',
  },
  { id: 'violet', title: 'Violet', color: '#4a6bff', text: 'A valley of wild lupins in June.' },
];

export default function App({ columns = 3, stiffness = 280, damping = 28 }) {
  const [openId, setOpenId] = useState(null);
  const open = places.find((place) => place.id === openId);

  return (
    <Animated.Scene tempo={{ spring: { stiffness, damping } }}>
      <div className="stage">
        <div className="grid" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
          {places.map((place) => (
            <button
              key={place.id}
              type="button"
              className="tile"
              onClick={() => setOpenId(place.id)}
            >
              {/* The same move id as the cover: the tile keeps its place while the cover is shown. */}
              <Animated.div
                move={place.id}
                className="swatch"
                style={{ background: place.color }}
              />
              <span>{place.title}</span>
            </button>
          ))}
        </div>
        <Animated.Keep>
          {open && (
            <div key={open.id} className="detail">
              <Animated.div
                className="sheet"
                seed={{ opacity: 0 }}
                pose={{ opacity: 1 }}
                depart={{ opacity: 0 }}
              />
              <Animated.div move={open.id} className="cover" style={{ background: open.color }} />
              <Animated.div
                className="copy"
                seed={{ opacity: 0, transform: [{ translateY: 12 }] }}
                pose={{ opacity: 1, transform: [{ translateY: 0 }] }}
                depart={{ opacity: 0 }}
              >
                <h2>{open.title}</h2>
                <p>{open.text}</p>
                <button type="button" onClick={() => setOpenId(null)}>
                  Close
                </button>
              </Animated.div>
            </div>
          )}
        </Animated.Keep>
      </div>
    </Animated.Scene>
  );
}

styles.css

.stage {
  position: relative;
  min-height: 420px;
  padding: 24px;
}

button {
  font: inherit;
  cursor: pointer;
}

.grid {
  display: grid;
  gap: 12px;
}

.tile {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #16181d;
  text-align: start;
}

.swatch {
  height: 96px;
  border-radius: 16px;
}

.tile span {
  font-weight: 650;
}

.detail {
  position: absolute;
  inset: 16px;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 16px;
}

.sheet {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px #e4e6ef;
}

.cover,
.copy {
  position: relative;
}

.copy {
  display: grid;
  gap: 10px;
}

.cover {
  height: 220px;
  border-radius: 18px;
}

.detail h2 {
  margin: 6px 0 0;
}

.detail p {
  margin: 0;
  color: #5b6070;
}

.detail button {
  justify-self: start;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #16181d;
  color: #fff;
}

しくみ

タイルと詳細のカバーは、ひとつの Animated.Scene の中で同じ move の識別子を使っています。
タイルがアンマウントされてカバーがマウントされると、Scene が測った 2 つの矩形の間をアニメーションします。
Animated.Keep がフェードアウトする間も詳細を残すので、閉じるときもアニメーションします。
列数の設定を変えるのは普通のレイアウト変更です。見えているタイルはすべて新しい位置へ移動します。

共有ギャラリー

しくみ

ほかのサンプル

検索