MotionPresence

ವಿಷಯ ಒಳಗೆ ಬಂದು ಹೊರಗೆ ಹೋಗುವ ಅನಿಮೇಶನ್ ಸಮಯದಲ್ಲಿ ಅದನ್ನು ಮೌಂಟ್ ಆಗಿಡುತ್ತದೆ.

ವೆಬ್React Nativeವಿಷಯ ಮತ್ತು ಗಾತ್ರ

ಪ್ರಯತ್ನಿಸಿ

ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…

JavaScript ಆಫ್ ಆಗಿದೆ. ಕೆಳಗಿನ ಕೋಡ್ ಪೂರ್ಣ ಉದಾಹರಣೆ.

App.jsx

import { useState } from 'react';
import { MotionPresence } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const exits = {
  rise: { opacity: 0, translateY: -16 },
  fall: { opacity: 0, translateY: 16 },
  shrink: { opacity: 0, scale: 0.9 },
};

export default function App({ exit = 'rise', duration = 320 }) {
  const [visible, setVisible] = useState(true);
  const [saved, setSaved] = useState(1);

  const save = () => {
    setSaved(saved + 1);
    setVisible(true);
  };

  return (
    <div className="stage">
      <div className="slot">
        <MotionPresence
          present={visible}
          exit={exits[exit]}
          transition={{ duration, easing: 'easeOut' }}
          className="notice"
        >
          <span>Draft {saved} saved</span>
          <button onClick={() => setVisible(false)}>Dismiss</button>
        </MotionPresence>
      </div>
      <div className="buttons">
        <button onClick={save}>Save draft</button>
        <button onClick={() => setVisible(!visible)}>{visible ? 'Hide' : 'Show'} notice</button>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 40px 20px;
}

.slot {
  display: grid;
  place-items: center;
  min-height: 64px;
  width: min(100%, 420px);
}

.notice {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border-radius: 14px;
  background: #0e2e24;
  color: #fff;
}

.notice button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: none;
  color: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.buttons button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons button:first-child {
  border-color: #176b52;
  background: #176b52;
  color: #fff;
}

ಅತಿ ಚಿಕ್ಕ ಬಳಕೆ

Notice.jsx

<MotionPresence present={visible} exit={{ opacity: 0, translateY: -12 }}>
  Draft saved
</MotionPresence>;

ಇದು ನಿಮಗಾಗಿ ನಿರ್ವಹಿಸುವುದು

ಅನ್‌ಮೌಂಟ್ ಮಾಡುವ ಬದಲು present ಬದಲಿಸಿ; ವಿಷಯ ತೆಗೆಯುವ ಮೊದಲು ನಿರ್ಗಮಿಸುತ್ತದೆ.
ನಿರ್ಗಮನದ ಸಮಯದಲ್ಲಿ ಮರುಸ್ಥಾಪಿಸಿದರೆ ಪ್ರಸ್ತುತ ಮೌಲ್ಯಗಳಿಂದ ಮುಂದುವರಿಯುತ್ತದೆ.
ಮತ್ತೆ ಕಾಣಿಸುವ ವಿಷಯ exit pose ನಿಂದ ಪ್ರವೇಶಿಸುತ್ತದೆ.
ಮೊದಲ ರೆಂಡರ್ ಅದನ್ನು ವಿಶ್ರಾಂತಿಯಲ್ಲಿ ತೋರಿಸುತ್ತದೆ, ಹೀಗಾಗಿ ಈಗಾಗಲೇ ಇರುವ ವಿಷಯ ಮಿನುಗುವುದಿಲ್ಲ.

ಇದಕ್ಕೆ ಬಳಸಿ

ಉಳಿಸಿದ ಕರಡಿನ ಸೂಚನೆ.
ಚೆಕ್‌ಔಟ್‌ನಲ್ಲಿ ಕೂಪನ್ ಸಂದೇಶ.
ಫೀಲ್ಡ್ ಕೆಳಗಿನ ದೋಷ ಸಂದೇಶ.

Props

Prop	ಟೈಪ್	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`present`	`boolean`	`—`ಕಡ್ಡಾಯ	ವಿಷಯ ತೋರಿಸಿ ಅಥವಾ ಮರೆಮಾಡಿ. ಅನ್‌ಮೌಂಟ್ ಮಾಡುವ ಬದಲು ಇದನ್ನು ಬದಲಿಸಿ.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	ವಿಶ್ರಾಂತಿಯ pose.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	ವಿಷಯ ನಿರ್ಗಮಿಸುವ ಮತ್ತು ಪ್ರವೇಶಿಸುವ pose.
`as`	`element`	`'div'`	ರೆಂಡರ್ ಮಾಡಬೇಕಾದ ಎಲಿಮೆಂಟ್.
`transition`	`Transition`	`spring`	ಟೈಮಿಂಗ್ ವಕ್ರ `{ duration, easing }` ಅಥವಾ spring `{ tempo: 'spring', spring }`. spring ಗಳು ಅಡ್ಡಿಯಾದಾಗ ತಮ್ಮ ಆವೇಗ ಉಳಿಸಿಕೊಳ್ಳುತ್ತವೆ.
`onExitComplete`	`() => void`		ವಿಷಯ ನಿರ್ಗಮಿಸಿ ತೆಗೆದ ನಂತರ ನಡೆಯುತ್ತದೆ.

ಇತರ props ರೆಂಡರ್ ಆಗುವ ಎಲಿಮೆಂಟ್‌ಗೆ ಹೋಗುತ್ತವೆ, ಹೀಗಾಗಿ className, style ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಎಂದಿನಂತೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ.

ವೆಬ್ ಮತ್ತು React Native

Pose ಗಳು opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width ಮತ್ತು height ಬಳಸುತ್ತವೆ. ವಿಷಯ ನಿರ್ಗಮಿಸಿದ ನಂತರ onExitComplete ನಡೆಯುತ್ತದೆ.

ಅದೇ pose ಗಳು ಮತ್ತು props React Native ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ.

ಈ ಉದಾಹರಣೆಗಳಲ್ಲಿ ಬಳಸಲಾಗಿದೆ

ಚೆಕ್‌ಔಟ್ ಸಾರಾಂಶಕಾರ್ಟ್ ಬದಲಾದಂತೆ ಪ್ರಮಾಣಗಳು, ಸಾಲು ಮೊತ್ತಗಳು ಮತ್ತು ಒಟ್ಟು ಉರುಳುತ್ತವೆ; ಕೂಪನ್ ಸೂಚನೆ ಬಂದು ಹೋಗುತ್ತದೆ; ಪಾವತಿಗೆ ಉದ್ದೇಶಪೂರ್ವಕ ಹಿಡಿತ ಬೇಕು.MotionListMotionNumberMotionPresenceMotionHold