フェードアニメーションの自作【Vanilla JS】

JavaScript

const fadeAnime = (obj) => {
	let type = obj.type;
	if(type !== 'toggle' && type !== 'in' && type !== 'out') return;

	const target = document.getElementById(obj.target);
	if(target === null) return;

	const displayProperty = getComputedStyle(target).display;
	if(type ==='toggle') {
		type = (displayProperty === 'none')? 'in' : 'out';
	}

	const speed = obj.speed;
	let inSpeed = 300,
		outSpeed = 300 ;
	if(speed instanceof Object) {
		if(!isNaN(Number(speed.in))) inSpeed = speed.in;
		if(!isNaN(Number(speed.out))) inSpeed = speed.out;
	} else {
		if(!isNaN(Number(speed))) {
			inSpeed = speed;
			outSpeed = speed;
		}
	}

	let inCallBack = null,
		outCallBack = null;
	if(typeof obj.callBack === 'function') {
		inCallBack = obj.callBack;
		outCallBack = obj.callBack;
	} else if(obj.callBack instanceof Object) {
		if(typeof obj.callBack.in === 'function') inCallBack = obj.callBack.in;
		if(typeof obj.callBack.out === 'function') outCallBack = obj.callBack.out;
	}

	let inBeforeAction = null,
		outBeforeAction = null;
	if(typeof obj.beforeAction === 'function') {
		inBeforeAction = obj.beforeAction;
		outBeforeAction = obj.beforeAction;
	} else if(obj.beforeAction instanceof Object) {
		if(typeof obj.beforeAction.in === 'function') inBeforeAction = obj.beforeAction.in;
		if(typeof obj.beforeAction.out === 'function') outBeforeAction = obj.beforeAction.out;
	}

	let isFadein = null,
		isFadeout = null;
	const property = (obj.display)? obj.display : 'block';
	const fadeIn = (obj) => {
		cancelAnimationFrame(isFadeout);
		const start = performance.now();
		const target = obj.target;
		const duration = obj.duration || 1000;
		target.style.opacity = 0;
		target.style.display = property;
		const animate = (current_time) => {
			const elapsed = current_time - start;
			let progress = Math.min(elapsed / duration, 1);
			target.style.opacity = progress;
			if (progress < 1) {
				isFadein =  requestAnimationFrame(animate);
			} else {
				if(inCallBack !== null) inCallBack();
			}
		}
		isFadein = requestAnimationFrame(animate);
	}
	const fadeOut = (obj) => {
		cancelAnimationFrame(isFadein);
		const start = performance.now();
		const target = obj.target;
		const duration = obj.duration || 1000;
		target.style.opacity = 1;
		const animate = (current_time) => {
			const elapsed = current_time - start;
			let progress = Math.max(1 - elapsed / duration, 0);
			target.style.opacity = progress;
			if (progress > 0) {
				isFadeout = requestAnimationFrame(animate);
			} else {
				target.style.display = 'none';
				if(outCallBack !== null) outCallBack();
			}
		}
		isFadeout = requestAnimationFrame(animate);
	}
	if(type === 'in') {
		if(inBeforeAction !== null) inBeforeAction();
		fadeIn({
			target: target ,
			duration: inSpeed
		});
	} else if(type === 'out') {
		if(outBeforeAction !== null) outBeforeAction();
		fadeOut({
			target: target ,
			duration: outSpeed
		});
	}
}



fadeAnime({
    type: 'out',
    target: trigger,
    speed: modal_close_speed
});