-
[css] animation 재생을 다시 실행할 수 있도록 처리ETC 2024. 8. 11. 18:58반응형
css animation을 특정 이벤트가 발생할 때마다 재생시키고 싶을 때 아래와 같이 작성하는 케이스가 있다.
<html> <head> <title>Home</title> <script> function play() { var target = document.querySelector('#target'); target.classList.remove('bounce'); target.classList.add('bounce'); } </script> <style> #target { width: 100px; height: 100px; background-color: red; } .bounce { animation: bounce 2s; } @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(100px); } 100% { transform: translateY(0); } } </style> </head> <body> <button onclick="play()">play</button> <div id="target"> </div> </html>위 예제에서 버튼을 누르면 100px * 100px의 빨간색 박스가 아래로 이동했다가 원위치될것이다. 그런데 처음 버튼을 눌렀을 땐 정상동작하는데, 두번째부터는 정상동작하지 않는다. 이 경우 아래와 같이 소스를 수정하면 된다.
<html> <head> <title>Home</title> <script> function play() { var target = document.querySelector('#target'); target.classList.remove('bounce'); target.offsetWidth; // 추가 target.classList.add('bounce'); } </script> <style> #target { width: 100px; height: 100px; background-color: red; } .bounce { animation: bounce 2s; } @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(100px); } 100% { transform: translateY(0); } } </style> </head> <body> <button onclick="play()">play</button> <div id="target"> </div> </html>이유는 html 태그의 구조나 다시 랜더링할 속성 변경이 없어서 브라우저의 리플로우(reflow) 및 리페인트(repaint)가 일어나지 않아서인데, offsetWidth과 같이 읽기만해도 리플로우(reflow)를 유발시키는 속성을 호출하여 이를 해결할 수 있다.
What forces layout/reflow. The comprehensive list. (github.com)
What forces layout/reflow. The comprehensive list.
What forces layout/reflow. The comprehensive list. - what-forces-layout.md
gist.github.com
관련 설명 및 최적화 방법은 아래 블로그에서 잘 정리되어있다.
[Browser] Reflow와 Repaint | Beomy
[Browser] Reflow와 Repaint
브라우저의 화면이 수정될 때, 렌더링 과정을 최적화 하는 방법에 대해 이야기 할 것입니다.
beomy.github.io
반응형'ETC' 카테고리의 다른 글
[VMWare] VMWare Fusion 에서 Windows 설치시 네트워크 이슈 해결 (0) 2024.11.23 [golang] WebAssembly 빌드시 expected magic word 00 61 73 6d (0) 2024.08.23 [winget] 소스를 열 때 실패했습니다. 문제가 계속되면 'source reset' 명령을 사용해 보십시오. 발생시 확인사항 (0) 2024.07.31 [Windows Terminal] 윈도우 터미널 실행 명령어 (wt) (1) 2023.11.12 [Window] Windows 11 에서 Powershell 을 통해 사용자 폴더 이름 변경 방법 (1) 2023.10.25