# ghostkit/3.3.3/assets/js/utils/transition-callback.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.3.3. 70 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.3.3/code/assets/js/utils/transition-callback.js
- Raw: https://pluginprobe.com/plugins/ghostkit/3.3.3/raw/assets/js/utils/transition-callback.js
- Modified: 2024-02-18T18:40:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.3.3/code/assets/js/utils/transition-callback.js#L10-L20`.

```javascript
const MILLISECONDS_MULTIPLIER = 1000;

function getTransitionDurationFromElement(element) {
	if (!element) {
		return 0;
	}

	// Get transition-duration of the element
	let { transitionDuration, transitionDelay } =
		window.getComputedStyle(element);

	const floatTransitionDuration = Number.parseFloat(transitionDuration);
	const floatTransitionDelay = Number.parseFloat(transitionDelay);

	// Return 0 if element or transition duration is not found
	if (!floatTransitionDuration && !floatTransitionDelay) {
		return 0;
	}

	// If multiple durations are defined, take the first
	[transitionDuration] = transitionDuration.split(',');
	[transitionDelay] = transitionDelay.split(',');

	return (
		(Number.parseFloat(transitionDuration) +
			Number.parseFloat(transitionDelay)) *
		MILLISECONDS_MULTIPLIER
	);
}

function execute(possibleCallback, args = [], defaultValue = possibleCallback) {
	return typeof possibleCallback === 'function'
		? possibleCallback(...args)
		: defaultValue;
}

export default function transitionCallback(
	callback,
	transitionElement,
	waitForTransition = true
) {
	if (!waitForTransition) {
		execute(callback);
		return;
	}

	const durationPadding = 5;
	const emulatedDuration =
		getTransitionDurationFromElement(transitionElement) + durationPadding;

	let called = false;

	const handler = ({ target }) => {
		if (target !== transitionElement) {
			return;
		}

		called = true;
		transitionElement.removeEventListener('transitionend', handler);
		execute(callback);
	};

	transitionElement.addEventListener('transitionend', handler);
	setTimeout(() => {
		if (!called) {
			transitionElement.dispatchEvent(new Event('transitionend'));
		}
	}, emulatedDuration);
}

```