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`	timing বক্ররেখা `{ duration, easing }` বা স্প্রিং `{ tempo: '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