User-271186128 posted
Hi TheNutCracker,
With reference to the document, we can know that: The transitionend event occurs when a CSS transition has completed.
So, every time the transition is occurs, it will trigger this event.
If you want to restore the css style, I suggest you could refer to the following code:
<style>
#myDIV {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#myDIV:hover {
width: 400px;
}
</style>
<p>Hover over the div element below, and wait for the transition effect to end.</p>
<div id="myDIV"></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<script>
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
var flag = true;
function myFunction() {
if (flag) {
this.innerHTML = "transitionend event occured - The transition has completed";
this.style.backgroundColor = "pink";
flag = false;
}
else {
this.innerHTML = "transitionend event occured - restore";
this.style.backgroundColor = "red";
flag = true;
}
}
</script>
The screenshot:

Besides, if you want to prevent the transitionend event, you could try to remove the CSS
transition-property property.
More details, see:
http://www.w3schools.com/jsref/event_transitionend.asp
http://www.w3schools.com/css/css3_transitions.asp
Best regards,
Dillion