post-thumbnail

display: "none"에서 왜 transition이 먹히지 않을까?

⚠️ 문제: 부드러운 효과를 위해 transition을 주고 싶은데 적용되지 않는다. 과 을 사용해서 토스트 메시지를 띄우고 없애는 코딩을 하고 있었다. 나타났다가 사라지는 효과를 부드럽게 주기 위해 transition을 사용하고자 했다. 하지만 transition이 적용되지 않고 부드럽지 못하게 뚝뚝 끊기는 현상이 발생했다. 이 이슈를 포스팅으로 다루기 위해 코드를 좀 더 단순화하여 나타내보았다. 상자에 마우스가 호버되면 으로 바뀌어 상자가 보이지 않는다. 마우스가 올라가고, 내려갈 때 애니메이션이 부드럽게 적용되지 않는 모습이다. !codepen[sasha1107/embed/KKBdBgV?default-tab=html%2Cresult] 왜 transition이 적용되지 않을까? transition이란? CSS 속성값이 변할 때, 값의 변화가 일정시간에 거쳐 일어나도록 하는 것이다. 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있다.이전 프로퍼티의 상

2022년 12월 26일
·
0개의 댓글
·