ಮಾರ್ಗದರ್ಶಿಗಳು · 05

ಪ್ರವೇಶ, ನಿರ್ಗಮನ ಮತ್ತು ಲೇಔಟ್

ನಿರ್ಗಮಿಸುವ ಮಕ್ಕಳನ್ನು ಅವುಗಳ ಮೋಷನ್ ಮುಗಿಯುವವರೆಗೆ ಇಟ್ಟುಕೊಳ್ಳಿ, ಮತ್ತು ಸ್ಥಾನ ಹಾಗೂ ಗಾತ್ರ ಬದಲಾವಣೆಗಳನ್ನು, ಕಾಂಪೊನೆಂಟ್‌ಗಳ ನಡುವೆಯೂ, ಅನಿಮೇಟ್ ಮಾಡಿ.

Animated.Keep

Animated.Keep key ಇರುವ ನೇರ ಮಕ್ಕಳನ್ನು ಅವುಗಳ depart pose ಉದ್ದಕ್ಕೂ ಇಟ್ಟುಕೊಳ್ಳುತ್ತದೆ. 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 commit ಆದ ಲೇಔಟ್ ಅಳೆಯುತ್ತದೆ. move ಇರುವ ಎಲಿಮೆಂಟ್ ತನ್ನ ಸ್ಥಾನ ಮತ್ತು ಗಾತ್ರ ಬದಲಾವಣೆಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುತ್ತದೆ; move="pill" ನಂತಹ ಸ್ಟ್ರಿಂಗ್, ಒಂದು ಅನ್‌ಮೌಂಟ್ ಆಗಿ ಇನ್ನೊಂದು ಮೌಂಟ್ ಆದರೂ, Scene ಒಳಗೆ ಅದೇ ಗುರುತಿನ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಜೋಡಿಸುತ್ತದೆ.

ಆ ಎಲಿಮೆಂಟ್‌ಗಳ ಲೇಔಟ್ translate ಮತ್ತು scale ಅನ್ನು Scene ನಿರ್ವಹಿಸುತ್ತದೆ, ಹೀಗಾಗಿ ನಿಮ್ಮ ಸ್ವಂತ 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