인프런 커뮤니티 질문&답변
작성한 질문수
css 만으로 아코디언 애니메이션을 적용할 경우, 다른 libary들은 코드로 그부분들을 해결해주고 있는걸까요?
해결된 질문
작성
·
640
0
애니메이션 관련해서 깊이 고민해보지 못한 부분(디테일)들을 발견할 수 있어서 의미있는 강의 였습니다.
강의에서 "item3" classname 을 적용하는 과정 중 얻은 인사이트는 컨텐츠 사이즈에 따라 height가 변경되는 애니메이션을 적용할 경우, 닫히는 아코디언 요소와 열리는 아코디언 요소가 이상하게 동작한다는 내용을 다루셨는데 저도 이상하는 느낌은 들었지만 정확한 원인을 모르겠네요.
transition-duration:0.3s 은 같기 때문에 같이 닫히는게 동시에 닫히고 있는게 맞는데 왜 이상하게 느껴질까요?
"ease" 가 그런 느낌을 주는 원인이 아닐까하고 그냥 넘어갈까 싶은데 혹시나 모르는 부분이 있을까 질문 남겨봅니다.
:)
답변 4
3
저도 한참 이해가 안되서 조금 고민을 해봤는데요. 강의 중에 동작이 부자연스럽게 느껴진 이유에 대해서 "&.current .description 를 100vh로 해놓았기 때문이다." 라고 언급하셨습니다.
즉, 각 아코디언의 높이를 정확하게 특정하지 않았고, 임의로 (100vh)로 지정했기 때문이다 라고 하셨는데요. 그렇다면 왜 높이를 특정하지 않았을 때 부자연스러워지나? 에 대한 궁금증이 생기더라구요.
강의에서 언급하신 부분을 보면 "밑에것이 밀고 올라는 속도와 위에 것이 닫히는 속도가 같아야 하는데, 그렇지 못하다" 라고 하셨어요.
즉, 각 아코디언의 높이를 특정하지 못하고 임의의 값 (100vh) 을 넣으면 각 아코디언 마다 열고 닫히는 속도가 다르다는 것이죠.
그리고 만약에 이것을 특정값으로 했을 때는 그 속도가 일치하게 되어 자연스럽다 라는 의미인 것 같습니다. 그리고 그 "특정값이 100px 인 이유는 아코디언의 내용(description)이 아코디언의 높이보다 커야 (넘어야) 자연스러워진다고 하셨습니다. 그래서 아마 그 특정값이 100px이였지 않았나 싶습니다.
그리고 dutation을 0.3으로 줬는데 왜 "속도"가 다르냐에 대한 궁금증도 있었는데요. 음 언급하신 것을 보면 우리가 max-height으로 설정한 값은 "애니메이션에 의해서 최종 종착지로 인식하는 높이" 가 된다고 하십니다.
즉, 예를 들어 max-height가 100vh인 경우에는 0.3s 안에 100vh를 펼치려고 합니다. 그러니까 아코디언이 열리는 속도가 굉장히 빠릅니다. 0.3s 안에 그걸 다 열어야하니깐요. 근데 100px 로 하면 천천히 열립니다. 0.3s 안에 그만큼만 열면 되니깐요. 0.3s 는 단순히 변화의 시간이지, 속도가 아니라는 것을 의미합니다.
그래서 결론은 이렇습니다.
왜 부자연스러운가?
아코디언의 max-height을 100vh로 해서 그렇다.
max-height가 100vh 인것과 부자연스러움은 무슨 상관인가?
max-height가 100vh로 할 경우, 각 요소의 컨텐츠 길이에 따라서 애니메이션의 속도가 다르게 된다. 닫히는 아코디언과 열리는 아코디언의 속도가 달라지면, 부자연스러워 보인다.
저도 계속 곱씹어보면서 이해한 내용이라 틀린 부분이 있을 수 있고, 재남님의 의도를 정확히 파악하지 못한 부분이 있을 수 있습니다.
좋은 설명 감사합니다. 제 머리속 생각을 그대로 꺼내주신 것 같네요 ㅎㅎ
강의중에 말씀드린 내용은 어디까지나 저의 추측일 뿐이지만,
그 추측이 맞다는 전제하에 조금만 부연 설명 해보겠습니다. (가독성을 고려해 새글로 옮길게요)
2
withkey님께서 충분히 설명을 잘 해주셨습니다만, 추가로 예시를 들어보겠습니다.
연속하는 두 아코디언 아이템 A, B가 있다고 합시다.
A의 실제 높이는80px, B의 실제 높이는100px입니다.
transition을3초간 주었다고 해보죠.
max-height를 100px로 특정
각 컨텐츠의 height가 정해져있지 않기 때문에, transition의 판단기준은 100px가 됩니다.
즉 3초간 0px -> 100px 또는 100px -> 0px로 변화할 것입니다.
그렇다면 A는 전부 열리거나 닫히는 데에 3 x 80/100 = 2.4초가 걸릴 것입니다.
나머지 0.6초 동안은 멈춰있게 되겠죠.
(실제로는 easing함수가 적용되기 때문에 완전히 멈춰있지는 않을 것이지만,
여기서는 편의상 이 시간동안의 변화는 무시하고, 멈춰있는 것으로 간주합시다)
열릴때는 먼저 2.4초동안 높이가 변하고, 나머지 0.6초를 대기하는 반면
닫힐때는 0.6초를 대기하다가 이후 2.4초동안 높이가 변할 것입니다.
반면 B는 전부 열리거나 닫히는 데에 3초가 걸립니다.
멈춰있는 시간은 없습니다.
따라서 A가 열려있는 상태에서 B를 클릭하는 동작에 대해
A는 0.6초를 대기하다가 이후부터 닫히는 반면
B는 3초 전체에 걸쳐서 열리게 됩니다.
0.6초는 제법 짧은 시간이라서 부자연스러운 느낌이 그렇게까지 크진 않습니다.
max-height를 200px로 특정
A는 전부 열리거나 닫히는 데에 3 x 80/200 = 1.2초가 걸립니다.
1.8초 동안은 멈춰있게 됩니다.
반면 B는 전부 열리거나 닫히는 데에 3 x 100/200 = 1.5초가 걸립니다.
1.5초 동안은 멈춰있게 됩니다.
따라서 A가 열려있는 상태에서 B를 클릭하는 동작에 대해
A는 1.8초를 대기했다가 1.2초만에 닫히는 반면
B는 1.5초동안 열리고, 1.5초 대기합니다.
즉 처음 1.5초 동안은 A는 그대로 있는 상태에서 B만 높아지다가
1.5초 시점부터 1.8초까지는 A와 B 둘 다 아무런 변화가 없이 정지해 있고,
1.8초 이후부터는 B는 그대로 있는 상태에서 A만 줄어들 것입니다.
따라서 '덜컥거리는' 느낌이 강하게 들게 됩니다.
이런 현상은 max-height와 실제 높이의 차이가 클수록 더욱 선명하게 드러나겠네요.
1
0
자세하게 정리해주셨네요 ㅎㅎ 감사합니다.👍👍
+제가 변화가 일어나는 기간을 속도라고 잘못 표현했었네요 ㅎㅎ
말씀하신게 맞는것 같아요. 100vh로 할경우 각기다른 컨텐츠의 사이즈에 동일한 변화시간을 주면 모두 다른 속도의 애니메이션으로 보여서 문제였겠네요.
(상대 속도가 다른 물체들을 눈으로 쫓아가면 굉장히 부자연스러우니)
추가로 이해에 도움이 됐던 예시로 컨텐츠 사이즈가 달라도 이상하게 동작하지않는 MUI의 아코디언 컴포넌트를 보니 duration이 컨텐츠 크기에 따라 다름을 확인할 수 있어서 말씀하신 내용이 어느정도 합리적인 것 같습니다.