Javascript DOM TransitionEvent propertyName Property

Introduction

Get the property name associated with the transition.

Hover over the div element below, and wait for the transition effect to end.

The propertyName property returns the name of the CSS property the transition effect is for.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*www  .  j a v  a 2  s.co m*/
  width: 100px;
  height: 100px;
  background: yellow;
  -webkit-transition: 2s; /* For Safari 3.1 to 6.0 */
  transition: 2s;
}

#myDIV:hover {
  width: 400px;
}
</style>
</head>
<body>
<div id="myDIV"></div>
<script>
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);

// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

function myFunction(event) {
  this.innerHTML = "CSS Property used: " + event.propertyName;
}
</script>

</body>
</html>

The propertyName property returns the name of the CSS property associated with the transition, when a transitionevent occurs.

This property is read-only.




PreviousNext

Related