<!DOCTYPE html>
<html>
<head>
<title>Foundation transitionend Example</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style=color:green>GeeksforGeeks</h1>
<h3> Foundation CSS JavaScript Miscellaneous Utilities</h3>
<button id="transition-button">
Trigger Transition
</button>
<div id="transition-div"
style="background-color: red;
width: 100px; height: 100px;
transition: width 0.5s ease;">
</div>
<script>
var button = document.getElementById('transition-button');
var transitionDiv = document.getElementById('transition-div');
button.addEventListener('click', function() {
// Toggle the width of the
// transition div between 100px and 200px
if (transitionDiv.style.width === '100px') {
transitionDiv.style.width = '200px';
} else {
transitionDiv.style.width = '100px';
}
});
// Use the Foundation.transitionend function
// to listen for the end of the transition
Foundation.transitionend(transitionDiv, function() {
console.log('Transition ended');
});
</script>
</center>
</body>
</html>