FYI and maybe for some sort of inspiration. I have put this JavaScript into place to leverage the Web Animations API.
So far my tests were positive but I did not manage to actually retrieve the callback value true, false or error.
/**
* Add your JavaScript code below:
*/
const callback = arguments[arguments.length - 1]; // last argument is callback
try {
// Select the element with the id "master"
const elementMasterOverlay = document.querySelector('#master');
// Function to handle transition end event for the "width" property
function handleTransitionEnd(event) {
// Check if the transitioned property is 'width'
if (event.propertyName === 'width') {
// Log the completion of the width transition
console.log('Width transition finished!', event);
// Remove the event listener to prevent memory leaks
elementMasterOverlay.removeEventListener('transitionend', handleTransitionEnd);
// Resolve the callback with "true" since the width transition is complete
callback(null, 'true');
} else {
// Resolve the callback with "false" if it's not the width transition
callback(null, 'false');
}
}
// Set up the transitionend event listener specifically for the width property
if (elementMasterOverlay) {
elementMasterOverlay.addEventListener('transitionend', (event) => {
if (event.propertyName === 'width') {
handleTransitionEnd(event);
}
});
} else {
// If the element is not found, throw an error to be caught
throw new Error('Element with ID "master" not found');
}
} catch (error) {
// Catch any errors and resolve the callback with "error"
console.error(error);
callback(null, 'error');
}
