Headless UIの雑メモ
Transtion
オプション | 解説 |
---|---|
enter | 要素が入力されている間、ずっと適用される。通常、ここで期間と遷移させたいプロパティを定義します。例えばtransition-opacity duration-75 |
enterForm | 入力開始時点。フェードインの場合 opacity-0 (透明) |
enterTo | 入力終了時点。フェードインの場合 opacity-100 (不透明) |
leave | 要素が離脱している間に適用。ここで期間と遷移させたいプロパティを定義します。例えばtransition-opacity duration-75 |
leaveFrom | 離脱の開始時点。フェードアウトの場合は、opacity-100 (不透明) |
leaveTo | 離脱の終了時点。フェードアウトの場合は、opacity-0 (透明) |
ポイントshowプロパティ。
- 初期状態isShowing(true)
- ボタンを押下
2.1. isShowingがtrue -> false
2.2. leave,leaveFrom(不透明) -> leaveTo(透明)
2.3. 500ms待機
2.4. isShowingがfalse->true
2.5. enterFromの状態(透明+120度傾き+サイズ50)
2.5.1. 120度傾きから0になるように回転
2.6. enterToの状態(不透明+0度傾き+サイズ50)へ、enterで指定した間隔(400ms)で遷移する
サンプル
const [isShowing, setIsShowing] = useState(true);
const [, , resetIsShowing] = useTimeoutFn(() => setIsShowing(true), 500);
return (
<div>
<MainEcosystem>
<div>
<div className="flex flex-col bg-black items-center py-16">
<div className="w-32 h-32">
<Transition
as={Fragment}
show={isShowing}
enter="transform transtion duration-[400ms]"
enterFrom="opactiy-0 rotate-[-120deg] scale-50"
enterTo="opactiy-100 rotate-0 scale-100"
leave="transform duration-200 transtion ease-in-out"
leaveFrom="opactiy-100 rotate-0 scale-100"
leaveTo="opactiy-0 scale-95"
>
<div className="w-full h-full bg-white rounded-md shadow-lg" />
</Transition>
</div>
</div>
<button
onClick={() => {
setIsShowing(false);
resetIsShowing();
}}
className="flex items-center px-3 py-2 mt-8 text-sm font-medium text-white transtion transform bg-black rounded-full backface-visibility-hidden active:bg-opacity-40 hover:scale-105 hover:bg-opacity-30 focus:outline-none bg-opacity-20"
>
<span className="ml-3">Click to transtion</span>
</button>
</div>
</MainEcosystem>
</div>
);