ETC
[css] animation 재생을 다시 실행할 수 있도록 처리
ddochea
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
반응형