styled 썸네일형 리스트형 [React] styled-components 에서 opacity 없이 모달 애니메이션 넣기 모달을 조건부 렌더링으로 구현하였지만, 애니메이션 효과가 없어서 UI가 너무 딱딱하게 느껴졌다. 검색해보니 대부분은 opacity: 0 으로 투명하게 만들고 클릭시 1로 바꿔 보이게끔 하는 방법을 사용하는 내용이었는데, 여러 시행착오 끝에 결론은 @keyframes와 animation을 이용하여 애니메이션을 추가하여 문제를 해결했다. 모달창을 구현하기 위해 3가지 조건이 필요했다. 모달창이 나타날 때 다른 요소보다 위에 위치하여 렌더링 되어야 했고 내부 버튼들도 잘 동작해야 했으며 마지막으로 백그라운드를 눌러도 모달창을 닫을 수 있어야 했다. opacity를 사용하면 문제점 모달 백그라운드 뒤의 버튼이나 요소들이 클릭되지 않거나 동작하지 않는 문제가 발생한다. pointer-events : none 속성.. 더보기 이전 1 다음