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