Delt galleri

En flise vokser til en detaljevisning og skrumper tilbage i gitteret.

Animated.SceneAnimated.Keepmove

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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

Sådan virker det

Flisen og detaljeomslaget bruger den samme move-identitet i én Animated.Scene.
Når flisen afmonteres og omslaget monteres, animerer Scene mellem deres målte rektangler.
Animated.Keep beholder detaljevisningen, mens den toner ud, så lukning også er animeret.
At ændre antallet af kolonner er en almindelig layoutændring: hver synlig flise flytter til sin nye plads.

Delt galleri

Sådan virker det

Flere eksempler

Søg