react-flip-toolkit のハマり回避
{"object":"block","id":"05c49eba-d79b-4725-a25e-02844a8d6c37","parent":{"type":"page_id","page_id":"ddedd3a3-27f7-4f18-ace8-f7a33c9aac46"},"created_time":"2022-12-05T14:48:00.000Z","last_edited_time":"2022-12-05T14:48:00.000Z","created_by":{"object":"user","id":"331f6aeb-795c-4cb0-943f-942720e012c6"},"last_edited_by":{"object":"user","id":"331f6aeb-795c-4cb0-943f-942720e012c6"},"has_children":false,"archived":false,"in_trash":false,"type":"callout","callout":{"rich_text":[{"type":"text","text":{"content":"昔のノートがあったのでこちらに退避","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"昔のノートがあったのでこちらに退避","href":null}],"icon":{"type":"emoji","emoji":"💡"},"color":"gray_background"}}
- 最小プロジェクト作って挙動確かめながらやるのが良いでしょう
Flippedの直下はdisplay: inline系だと動かないmarginやpaddingを指定するとジャンプするので、さらにその下で指定する
onExitを設定しているノードの、親を囲むものが消えてしまうと、アニメーションはおこらない。keyは同一のものにして更新などもしないようにする必要あり.
- 消えるアニメーションが、ガクッと動いたあとにおこる。
- 消える対象の、親の要素の大きさが変わらないようにする必要あり。
- もしくは、親自体を flipped にして、reverse するという方法もある。 しかし、さらに親をそうしなければいけなかったりなど、結構大変なので固定長にしてしまったほうが楽