HTML DOM에서 TransitionEvent 객체가 제공하는 propertyName 속성은 CSS 전환(transition) 이벤트가 발생했을 때, 해당 전환에 사용된 CSS 속성의 이름을 문자열 형태로 반환합니다. 예를 들어 요소의 transform 속성에 전환 효과가 적용되어 있다면, 전환이 끝날 때 발생하는 transitionend 이벤트의 propertyName 값은 "transform"이 됩니다.
구문(Syntax)
전환에 사용된 CSS 속성을 반환하는 기본 구문은 다음과 같습니다.
transitionEvent.propertyName
예제
아래 예제는 원형 div 요소에 마우스를 올리면(hover) 오른쪽으로 80px 이동하는 전환 효과가 실행됩니다. 전환이 종료되는 시점에 transitionend 이벤트가 발생하며, 이때 propertyName 속성을 통해 전환에 사용된 CSS 속성 이름을 화면에 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>TransitionEvent propertyName</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#playArea {
display: inline-block;
border-radius: 50%;
background-color: #DC3545;
width: 50px;
height: 50px;
border: 3px solid #AC3509;
transition: all 1.3s ease;
}
#playArea:hover {
transform:translateX(80px);
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>TransitionEvent-propertyName</legend>
<div id="playArea"></div>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var playDisplay = document.getElementById("playArea");
function getPropertyName(event) {
divDisplay.textContent = 'CSS Property Used for Transition: '+event.propertyName;
}
playDisplay.addEventListener("transitionend", getPropertyName);
</script>
</body>
</html>
실행 결과
div 요소에 마우스를 올리기 전 −
div 요소에 마우스를 올린 후 −
