css 만으로 아코디언 애니메이션을 적용할 경우, 다른 libary들은 코드로 그부분들을 해결해주고 있는걸까요?

저도 한참 이해가 안되서 조금 고민을 해봤는데요. 강의 중에 동작이 부자연스럽게 느껴진 이유에 대해서 "&.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 는 단순히 변화의 시간이지, 속도가 아니라는 것을 의미합니다.

그래서 결론은 이렇습니다.

1. 왜 부자연스러운가?

   1. 아코디언의 max-height을 100vh로 해서 그렇다.

2. max-height가 100vh 인것과 부자연스러움은 무슨 상관인가?

   1. max-height가 100vh로 할 경우, 각 요소의 컨텐츠 길이에 따라서 애니메이션의 속도가 다르게 된다. 닫히는 아코디언과 열리는 아코디언의 속도가 달라지면, 부자연스러워 보인다.

       

저도 계속 곱씹어보면서 이해한 내용이라 틀린 부분이 있을 수 있고, 재남님의 의도를 정확히 파악하지 못한 부분이 있을 수 있습니다.

withkey님께서 충분히 설명을 잘 해주셨습니다만, 추가로 예시를 들어보겠습니다.

연속하는 두 아코디언 아이템 A, B가 있다고 합시다.
A의 실제 높이는 80px, B의 실제 높이는 100px입니다.
transition을 3초간 주었다고 해보죠.

1. 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초는 제법 짧은 시간이라서 부자연스러운 느낌이 그렇게까지 크진 않습니다.

2. 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와 실제 높이의 차이가 클수록 더욱 선명하게 드러나겠네요.

강의중에 언급했습니다만, 각 아코디언의 높이를 정확히 특정해주지 않아서(못해서) 그렇습니다. js로 높이값을 계산해서 각각에 부여해주면 예쁘게 동작할거예요.

고정 사이즈로 transition을 적용한다면 animation이 정상적으로 동작한다고 이해해보겠습니다. 🙂