framer-motion

framer-motion
[framer-motion] AnimatePresence exit 애니메이션이 안될 때
처음 framer motion을 접한후 가장 큰 문제가 exit할때의 애니메이션이 적용되지 않을 때였다. 직접 경험 해본 바 3가지만 경우만 잘 체크하면 문제 없이 잘 적용되어 글을 작성해보려고 한다. AnimatePresence: 구성요소가 React 트리에서 제거될 때 애니메이션으로 표시되도록 허용해준다. 즉 AnimatePresence 를 적어주어야 exit 애니메이션이 적용이 된다. 1. AnimatePresence을 적자 무작정 처음 framer motion을 시작했을때 아무것도 모르고 exit 애니메이션을 적용시킬때의 실수. AnimatePresence로 exit 애니메이션을 가지고 있는 태그를 감싸주어야 exit 애니메이션이 동작한다. 2. AnimatePresence의 위치 가장 내가 해결..
→2023.10.25
framer-motion
[framer motion] 사라지는 animation을 주의하자
framer motion을 쓰다보면 사라지는 애니메이션을 많이 사용하는 것 같다. 참고로 이 글에서는 사라지는 애니메이션에 display : hidden을 사용할때만 한정한다.(state를 사용한다면 AnimatePresence를 주의하자)최근 마주한 버그는 무엇이냐하면 사라지는 애니메이션은 정상적으로 동작하지만 애니메이션만 사라졌을 뿐 요소는 그대로 남아 content 부분을 간섭한다는 것이다. 예를 들면 framer motion의 예제 중 Variants 예제에서 Variants 예제 바로 아래에 버튼을 하나 만들면 그 버튼은 눌러지지 않는다. 햄버거 메뉴가 사라졌지만 요소는 그대로 있어 버튼에 간섭하기 때문이다.이를 해결하는 방법은 바로 width 를 조절하는 것이다. 버튼을 간섭하는 요소는 바로 ..
→2023.10.18

• 이전
• 1
• 다음