MotionPresence

在進場與離場動畫期間保持內容掛載。

WebReact 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 姿態進場。
首次渲染時直接顯示靜止狀態，已經存在的內容不會閃爍。

適用情境

草稿已儲存的提示。
結帳頁的優惠券訊息。
輸入欄位下方的錯誤訊息。

Props

Prop	型別	預設值	說明
`present`	`boolean`	`—`必填	顯示或隱藏內容。用它來取代卸載。
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	靜止時的姿態。
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	內容離場以及進場時使用的姿態。
`as`	`element`	`'div'`	要渲染的元素。
`transition`	`Transition`	`spring`	時間曲線 `{ duration, easing }` 或彈簧 `{ tempo: 'spring', spring }`。彈簧被中斷時會保留動量。
`onExitComplete`	`() => void`		內容離場並被移除後執行。

其他 props 會傳給渲染的元素，所以 className、style 與事件處理函式照常可用。

Web 與 React Native

姿態可使用 opacity、translateX、translateY、scale、scaleX、scaleY、rotate、width 與 height。onExitComplete 會在內容離場後執行。

同樣的姿態與 props 在 React Native 上也能用。

用到它的範例

結帳摘要購物車改變時，數量、小計與總額都會滾動；優惠券提示會進出場；付款需要刻意長按。MotionListMotionNumberMotionPresenceMotionHold