애니메이션이 일시정지된 요소의 좌표값을 구하는 방법이 궁금합니다.(codepen 첨부)

Question

안녕하세요!css animation을 통해 요소를 이동시키다가animation-play-state: paused; 속성을 주어 애니메이션을 일시정지를 하였을 때해당 요소의 정확한 좌표값을 얻는 방법이 궁금합니다.제가 맞닥뜨린 문제는 애니메이션이 정지된 뒤 요소의 좌표값을 구했을 때화면에 렌더링되고있는 DOM의 좌표가 아닌, 애니메이션을 통해 진행되던 이전 상황의 좌표가 나옵니다.이는 애니메이션 Duration이 빠를수록 더 심해지구요.제가 이를 위해 시도했던 방법은 좌표값을 얻는 함수에 setTimeout을 주었는데요.요소가 일시정지되고 일정시간 뒤에 좌표를 얻어오면 정확한 좌표가 나오긴하더라구요.하지만 제가 원하는건 딜레이없이 일시정지 되는 그 즉시 정확한 좌표를 구하는것입니다.방법이 없다면 차라리 포기할텐데, 방법이 있는지 없는지를 모르겠어서 며칠내내 삽질중이네요 ㅠㅠ읽어주셔서 감사합니다.코드펜 주소입니다.약간의 설명을 첨부하자면1번 버튼을 클릭하면 애니메이션이 토글되면서요소의 X값이 아래 출력됩니다.2번 버튼은 클릭 시 요소의 X값이 출력되구요.(1번 버튼으로 정지한 뒤 2번 버튼을 누르면 둘의 값이 다른것을 확인하실 수 있습니다..)3번 버튼은 setTimeout을 통해 정확한 좌표를 구하려고 시도한 코드입니다..값은 정확하지만 딜레이가 없었으면 좋겠습니다..https://codepen.io/qirtudgus/pen/bGvXXpd

캐티 · Accepted Answer

이렇게 봐서는 모르겠스빈다.일시정지 하여 얻은 좌표를 출력하여 그 위치가 맞는지 비교를 해야 할 것이빈다.자바스크립트와 css 벨류는 정확하게 동기화가 안 되는데 이로 인하여 자바스크립트로 구현한 처리기로 대체하여 구동 하는 방식으로 정확하게 작동하도록 하반다.GitHub - juliangarnier/anime: JavaScript animation engineGitHub - daybrush/scenejs: &#x1f3ac; Scene.js is JavaScript & CSS timeline-based animation library참고 해 보셔요.

하얀뼈 · Answer

멈춘 그 순간 getBoundingClientRect로 해결할 수 있을 것 같은 생각이 드는군요

애니메이션이 일시정지된 요소의 좌표값을 구하는 방법이 궁금합니다.(codepen 첨부)

2개의 답변

Q&A 목록