Freimer | 프레이머 좋다

https://blog.toss.im/article/workflow-revolution

https://normallinchpin.tistory.com/8

freimer-motion

import { AnimatePresence, motion } from 'framer-motion'


return (
	<AnimatePresence>
        <motion.div
	      key="backdrop"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}  
        >
)

AnimatePresence는 Framer Motion에서 컴포넌트가 DOM에서 추가되거나 제거될 때 애니메이션 효과를 적용할 수 있게 해주는 컴포넌트입니다. 이는 motion 컴포넌트와 함께 사용되며, 요소의 등장 및 사라짐 애니메이션을 관리합니다.

다음은 AnimatePresence의 주요 역할과 기능입니다:

요소 추가 시 애니메이션: 요소가 DOM에 추가될 때 애니메이션 효과를 적용합니다.

요소 제거 시 애니메이션: 요소가 DOM에서 제거될 때 애니메이션 효과를 적용합니다.

중첩된 애니메이션: 여러 애니메이션을 중첩하여 복잡한 효과를 만들 수 있습니다.

유의점

1. 위에서 motion.div 는 기본적으로 상위 요소의 크기를 상속받는다

fixed 로 모션이 있는 모달을 만든다고 하면
배경의 x,y 가 화면을 가득 덮고
내부에 fixed 모달을 띄울 것이다

내부 모달은 상위 요소의 크기를 모두 차지하게 되어서
이걸 끊어내야 한다
inline-block 을 주면 width 는 끊어낼 수 있지만
높이는 여전히 먹는다
top 이나 left 값을 주면 끊어지는데
아마 기본적으로 inset-0 이 적용되어 있을 것으로 보인다

2. className 으로 tranlate 이 먹지 않는다

top 이나 left 값을 주어 크기 상속을 끊었더라도
중앙을 요소를 정확하게 맞추려면
-tranlate 을 주어야 할텐데 className 에서는 먹지 않는다
이럴 때는 initial 속성 내부에서 tranlate 을 사용하면
적용된다