[JS] RGB Door

transform3d

apple 웹사이트에서 transformY 대신 transform3d 를 쓰는 이유 => 3d 붙은 애들은 GPU를 써서 하드웨어 가속,

즉, y축으로만 이동해도 3d를 이용하면 퍼포먼스 향상

근데 그냥 translate 자체가 퍼포먼스가 좋긴함

---

hover하면 문 열기

.stage {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background-color: #333;
	/* perspective: 800px; */
}
.door-body {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: 0.5s;
	transform-origin: left;
}

.door:nth-child(1) .door-body {
	background: rgba(255, 0, 0, 0.7);
}
.door:nth-child(2) .door-body {
	background: rgba(0, 255, 0, 0.7);
}
.door:nth-child(3) .door-body {
	background: rgba(0, 0, 255, 0.7);
}
.door:hover .door-body {
	transform: perspective(800px) rotateY(-110deg);
}

---

JS Click 하면 문 열고 닫기

방법 1. DOM으로 currentItem 접근

작동은 되지만, 별로임. DOM 에 접근하는 건 연산속도 가장 느린 것 중 하나!


게다가, DOM Script가 아닌 경우(예를 들면, canvas) 쿼리셀렉터로 못잡아냄

즉, 범용적으로 생각하면 클래스로 접근하는 건 바람직하지 않음

(function () {
	const stageElm = document.querySelector('.stage');

	function doorHandler(e) {
		const targetElm = e.target;

		const currentItem = document.querySelector('.door-opened');
		if (currentItem) {
			currentItem.classList.remove('door-opened');
		}

		if (targetElm.classList.contains('door-body')) {
			targetElm.parentNode.classList.add('door-opened');
		}
	}

	stageElm.addEventListener('click', doorHandler);
})();

방법 2. (개선) 변수 let 활성화/비활성화

(function () {
	const stageElm = document.querySelector('.stage');
	// 현재 활성화된 아이템을 저장
	let currentItem;

	function doorHandler(e) {
		const targetElm = e.target;

		if (currentItem) {
			currentItem.classList.remove('door-opened');
		}

		if (targetElm.classList.contains('door-body')) {
			targetElm.parentNode.classList.add('door-opened');
			currentItem = targetElm.parentNode; // door
		}
	}

	stageElm.addEventListener('click', doorHandler);
})();

방법 3. (개선++) 함수로 쪼개기 (코드 간결화)

이벤트 핸들러는 최대한 간결하게 해야함! 함수로 더 쪼개자. 한 함수 안에 활성화/비활성화 기능이 다 있음... 리팩토링 해보자

(function () {
	const stageElm = document.querySelector('.stage');
	// 현재 활성화된 아이템을 저장
	let currentItem;
	// 활성화
	function activate(elm) {
		elm.classList.add('door-opened');
		currentItem = elm; // door
	}
	// 비활성화
	function inactivate(elm) {
		elm.classList.remove('door-opened');
	}

	function doorHandler(e) {
		const targetElm = e.target;
		if (currentItem) {
			inactivate(currentItem);
		}
		if (targetElm.classList.contains('door-body')) {
			activate(targetElm.parentNode);
		}
	}

	stageElm.addEventListener('click', doorHandler);
})();

페이지 로드하자마자 1번 이미지 열린 상태 설정 쉽게 가능

activate(document.querySelector('.door:nth-child(1)'));