JavaScript에서 transition 속성을 활용하면 요소의 스타일 변화에 부드러운 애니메이션 효과를 줄 수 있습니다. 전환 효과를 세부적으로 제어하려면 다음 네 가지 속성을 이해하고 설정해야 합니다.
- transitionProperty: 전환 효과가 적용될 CSS 속성을 지정합니다. (예: width, height, background-color)
- transitionDuration: 전환이 완료되기까지 걸리는 시간을 초(s) 또는 밀리초(ms) 단위로 지정합니다.
- transitionTimingFunction: 전환의 진행 속도 곡선을 정의합니다. (예: ease, linear, ease-in-out)
- transitionDelay: 전환이 시작되기 전까지의 대기 시간을 지정합니다.
이 네 가지 속성을 하나씩 설정할 수도 있지만, JavaScript에서는 style.transition과 같은 단축(shorthand) 속성을 사용해 한 번에 지정하는 것이 더 간편합니다.
예제
아래 코드를 실행한 뒤 [Set] 버튼을 클리고, 마우스 커서를 DIV2 위에 올려보세요. 배경색, 크기, 패딩, 테두리 반경이 모두 2초에 걸쳐 부드럽게 전환되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: 10px;
height: 300px;
width: 400px;
padding: 20px;
border: 2px solid blue;
}
#div2 {
padding: 80px;
position: absolute;
border: 2px solid BLUE;
background-color: yellow;
transform: rotateY(45deg);
}
#div2:hover {
background-color: orange;
width: 50px;
height: 50px;
padding: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<p>Hover over DIV2</p>
<button onclick = "display()">Set</button>
<div id = "div1">DIV1
<div id = "div2">DIV2</div>
</div>
<script>
function display() {
document.getElementById("div2").style.transition = "all 2s";
}
</script>
</body>
</html>
코드 설명
핵심은 스크립트의 다음 한 줄입니다.
document.getElementById("div2").style.transition = "all 2s";
여기서 "all 2s"는 모든(all) CSS 속성에 대해 2초(2s) 동안 전환 효과를 적용한다는 의미입니다. 즉, 단축 속성 하나만으로 transitionProperty와 transitionDuration이 동시에 설정됩니다. transitionTimingFunction과 transitionDelay는 생략할 수 있으며, 생략 시 기본값인 ease와 0s가 자동으로 적용됩니다.