HTML DOM Style의 transitionDelay 속성은 요소의 전환(transition) 효과가 시작되기 전까지의 지연 시간을 확인하거나 변경할 때 사용합니다. 이 속성을 활용하면 마우스 오버와 같은 이벤트가 발생한 직후 전환 효과가 바로 실행되지 않고, 지정한 시간만큼 늦게 시작되도록 만들 수 있습니다.
문법(Syntax)
transitionDelay 속성의 기본 문법은 다음과 같습니다.
1. transitionDelay 값 가져오기
object.transitionDelay
2. transitionDelay 값 설정하기
object.transitionDelay = "value"
value 자리에 들어갈 수 있는 값은 아래 표와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | initial 이 속성의 값을 기본(default) 값으로 되돌립니다. |
| 2 | inherit 부모 요소로부터 해당 속성 값을 상속받습니다. |
| 3 | time 전환 효과의 지연 시간을 초(s) 또는 밀리초(ms) 단위로 지정합니다. 예: "2s", "500ms" |
그럼 HTML DOM Style transitionDelay 속성의 실제 동작 예제를 살펴보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
.circle {
height: 100px;
width: 100px;
background-color: #db133a;
}
.circle:hover {
height: 200px;
width: 200px;
border-radius: 50%;
transition: all 1s;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style transitionDelay 속성 데모</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">전환 지연 설정</button>
<div class="show">이제 사각형 위에 마우스를 올려보세요</div>
<script>
function set() {
document.querySelector('.circle').style.transitionDelay = "2s";
}
</script>
</body>
</html>
실행 결과(Output)
위 예제에서는 “전환 지연 설정(Set TransitionDelay)” 버튼을 클릭하면 자바스크립트를 통해 빨간색 사각형 요소의 transitionDelay 값이 "2s", 즉 2초로 설정됩니다.
버튼을 클릭한 뒤 빨간색 사각형 위에 마우스 커서를 올리면, 크기 확대와 원형 변화가 일어나는 전환 효과가 즉시 시작되지 않고 2초 후에 천천히 진행되는 것을 확인할 수 있습니다.
