MotionSwap

Περιεχόμενο που εναλλάσσεται με διασταυρούμενο σβήσιμο ενώ το μέγεθος ακολουθεί.

WebReact NativeΠεριεχόμενο και μέγεθος

Δοκιμάστε το

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

App.jsx

import { useEffect, useState } from 'react';
import { MotionSwap, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

function Check() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16">
      <path d="m3 8.5 3 3 7-7" fill="none" stroke="currentColor" strokeWidth="2" />
    </svg>
  );
}

export default function App({ effect = 'up', align = 'center', spring = 'default' }) {
  const [status, setStatus] = useState('idle');
  const [loaded, setLoaded] = useState(true);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];

  useEffect(() => {
    if (status === 'idle') return;
    const next = status === 'saving' ? 'saved' : 'idle';
    const timer = setTimeout(() => setStatus(next), status === 'saving' ? 1100 : 1600);
    return () => clearTimeout(timer);
  }, [status]);

  useEffect(() => {
    if (loaded) return;
    const timer = setTimeout(() => setLoaded(true), 1200);
    return () => clearTimeout(timer);
  }, [loaded]);

  return (
    <div className="stage">
      <button className={`save ${status}`} onClick={() => setStatus('saving')}>
        <MotionSwap value={status} effect={effect} align={align} transition={transition}>
          {status === 'idle' && 'Save changes'}
          {status === 'saving' && 'Saving…'}
          {status === 'saved' && (
            <>
              <Check /> Saved
            </>
          )}
        </MotionSwap>
      </button>

      <MotionSwap
        as="div"
        inline={false}
        value={loaded ? 'profile' : 'loading'}
        effect={effect}
        transition={transition}
        className="profile"
      >
        {loaded ? (
          <div className="person">
            <span className="avatar">MK</span>
            <div>
              <strong>Min-ji Kim</strong>
              <p>Design engineer. Builds the motion system and the component docs.</p>
            </div>
          </div>
        ) : (
          <div className="skeleton">
            <span />
            <span />
          </div>
        )}
      </MotionSwap>
      <button className="reload" onClick={() => setLoaded(false)}>
        Reload profile
      </button>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 460px;
  margin: 0 auto;
  padding: 32px 20px;
}

.save {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    650 16px system-ui,
    sans-serif;
  cursor: pointer;
  transition: background-color 0.2s;
}

.save.saving {
  background: #2e8f6d;
}

.save.saved {
  background: #0e2e24;
}

.save svg {
  vertical-align: -2px;
}

.profile {
  width: 100%;
  border: 1px solid #cfe8dc;
  border-radius: 16px;
  background: #fff;
}

.person {
  display: flex;
  gap: 14px;
  padding: 18px;
}

.person p {
  margin: 4px 0 0;
  color: #5b616b;
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eaf6f0;
  color: #176b52;
  font-weight: 700;
}

.skeleton {
  display: grid;
  gap: 10px;
  padding: 22px 18px;
}

.skeleton span {
  height: 12px;
  border-radius: 6px;
  background: #eaf6f0;
}

.skeleton span:last-child {
  width: 60%;
}

.reload {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

Η πιο σύντομη χρήση

SaveButton.jsx

<button onClick={save}>
  <MotionSwap value={status} effect="up">
    {status === 'saving' ? 'Saving…' : status === 'saved' ? 'Saved' : 'Save'}
  </MotionSwap>
</button>;

Τι αναλαμβάνει για εσάς

Το στοιχείο αλλάζει από το μέγεθός του στην οθόνη στο φυσικό μέγεθος του νέου περιεχομένου, οπότε τα κουμπιά δεν πηδούν ποτέ.
Το παλιό περιεχόμενο σβήνει εκεί που ήταν ενώ το νέο εμφανίζεται· κανένα δεν αναδιατάσσεται κατά την εναλλαγή.
Η επιστροφή στη μέση μιας εναλλαγής συνεχίζει από ό,τι φαίνεται στην οθόνη αντί να στοιβάζει αντίγραφα.
Τα παιδιά με απλό κείμενο είναι το δικό τους value· για οτιδήποτε άλλο δώστε value.

Χρησιμοποιήστε το για

Αποθήκευση, μετά Αποθήκευση…, μετά Αποθηκεύτηκε.
Ένας σκελετός που γίνεται κάρτα προφίλ.
Ένα κουμπί αναπαραγωγής που γίνεται παύση.

Props

Prop	Τύπος	Προεπιλογή	Περιγραφή
`value`	`unknown`		Ταυτότητα του περιεχομένου· μια νέα τιμή προκαλεί εναλλαγή. Τα παιδιά με απλό κείμενο είναι η δική τους ταυτότητα.
`children`	`ReactNode`		Το περιεχόμενο.
`as`	`element`	`'span'`	Το στοιχείο προς απόδοση.
`inline`	`boolean`	`as === 'span'`	Το `true` προσαρμόζει το μέγεθος στο περιεχόμενο (ετικέτες, εικονίδια)· το `false` γεμίζει το πλάτος του γονέα και κινεί το ύψος.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Πού βρίσκεται το περιεχόμενο όσο αλλάζει το μέγεθος.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Πώς μπαίνει και βγαίνει το περιεχόμενο: το `up` ανεβαίνει, το `down` πέφτει, το `scale` μεγαλώνει.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.
`onMotionComplete`	`(value) => void`		Εκτελείται όταν ηρεμήσει η κίνηση.

Τα υπόλοιπα props πηγαίνουν στο στοιχείο που αποδίδεται, οπότε τα className, style και οι χειριστές συμβάντων λειτουργούν κανονικά.

Web και React Native

Το inline (προεπιλογή όταν αποδίδεται ως span) κινεί πλάτος και ύψος· το inline={false} γεμίζει το πλάτος του γονέα και κινεί το ύψος.

Στο React Native, οι εναλλαγές inline μετρούν το νέο περιεχόμενο σε μία γραμμή· χρησιμοποιήστε inline={false} για περιεχόμενο που αναδιπλώνεται.

Χρησιμοποιείται σε αυτά τα παραδείγματα

Απάντηση σε συνομιλίαΠροτάσεις που διπλώνουν, μια απάντηση σε ροή με σταθερό ρυθμό και μια γραμμή κατάστασης που εναλλάσσεται.MotionStreamMotionListMotionSwapMotionHeight