Skupna galerija

Ploščica zraste v podroben pogled in se skrči nazaj v mrežo.

Animated.SceneAnimated.Keepmove

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Kako deluje

Ploščica in naslovnica podrobnosti uporabljata isto identiteto move znotraj ene Animated.Scene.
Ko se ploščica odklopi in naslovnica priklopi, Scene animira med njunima izmerjenima pravokotnikoma.
Animated.Keep obdrži podrobnosti, medtem ko zbledijo, zato je animirano tudi zapiranje.
Sprememba števila stolpcev je navadna sprememba postavitve: vsaka vidna ploščica se premakne na novo mesto.

Skupna galerija

Kako deluje

Več primerov

Iskanje