css transition에 opacity 적용 시 주의사항
페이지 세로 위치에 따라 네이게이션의 표출/숨김을 부드럽게 처리하거나, 팝업 닫기 버튼을 클릭했을 때 창을 서서히 사라지게 하기 위해 transition: opacity 스타일이 많이 사용됩니다. 화면상에서는 아주 부드럽고 자연스러워 아무 문제가 없을 것 같지만, opacity는 말그대로 투명도이므로 눈에 보이지만 않을 뿐, 여전히 그 자리에 놓여있다는 것을 주의해야합니다. transition: opacity 스타일을 설정했을 경우, transition이 완료되었을 때 해당 엘리먼트의 display: none 스타일을 설정해야 의도하지 않은 사용자 인터렉션을 방지할 수 있습니다.(또는 pointer-events: none을 설정) 위 gif 에서 커서가 포인터로 변하는 것을 확인할 수 있습니다. 클릭하면..
프론트엔드
2019. 4. 18. 20:00
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total