JavaScript에서 전환(트랜지션) 효과가 적용될 CSS 속성을 지정하려면 transitionProperty 속성을 사용하면 됩니다. 이 속성은 CSS의 transition-property에 대응하며, 특정 요소에 어떤 CSS 속성이 변경될 때 부드러운 전환 애니메이션이 일어날지를 결정합니다.
transitionProperty 기본 문법
document.getElementById("요소ID").style.transitionProperty = "속성1,속성2";여러 개의 속성에 전환 효과를 적용하고 싶다면 위와 같이 쉼표(,)로 구분하여 나열하면 됩니다. all 값을 사용하면 모든 속성 변화에 전환 효과가 적용됩니다.
예제 코드
아래 예제는 버튼을 클릭하면 DIV2 요소의 width와 height 속성에만 전환 효과가 적용되도록 설정하는 코드입니다. 마우스를 DIV2 위에 올리면 배경색, 크기, 패딩, 테두리 둥글기가 변화하는데, 버튼을 누른 후에는 너비와 높이만 부드럽게 전환되는 것을 확인할 수 있습니다.
<!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);
transition: all 3s;
}
#div2:hover {
background-color: orange;
width: 50px;
height: 50px;
padding: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<p>DIV2 위에 마우스를 올려보세요</p>
<button onclick="display()">설정</button>
<div id="div1">DIV1
<div id="div2">DIV2</div>
</div>
<script>
function display() {
document.getElementById("div2").style.transitionProperty = "width,height";
}
</script>
</body>
</html>코드 설명
CSS에서 #div2에는 transition: all 3s;가 적용되어 있어 기본적으로 모든 속성 변화가 3초에 걸쳐 전환됩니다. 하지만 버튼을 클릭하면 display() 함수가 실행되어 transitionProperty 값이 "width,height"로 변경됩니다.
그 결과, 이후에는 너비(width)와 높이(height) 속성에만 전환 효과가 적용되고, 배경색이나 패딩 같은 다른 속성은 즉시 변경됩니다.
참고 사항
- transitionDuration: 전환이 완료되기까지 걸리는 시간을 설정합니다.
- transitionTimingFunction: 전환의 가속 곡선(ease, linear 등)을 지정합니다.
- transitionDelay: 전환이 시작되기 전의 지연 시간을 설정합니다.
이처럼 JavaScript의 transitionProperty를 활용하면 동적으로 전환 효과의 대상 속성을 제어할 수 있어, 사용자 인터랙션에 따라 유연한 애니메이션 효과를 구현할 수 있습니다.