• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

클릭 이벤트

21.03.10 14:30 작성 조회수 95

0

1분코딩님 항상 좋은 강의 감사합니다! :) section5에 이벤트 위임 보강편에서 화면을 클릭하실 때마다 일분이 사진 잔상이 떴는데 이런 식으로 구현하는 건가요?!

답변 1

답변을 작성해보세요.

1

잔상이 사라진 후(즉, transition이 끝난 후) 무언가 처리할게 있다면 바로 이 transitionend 이벤트를 사용하시면 됩니다.
참고로 일분이 포인터 소스를 아래 넣어드릴게요^^
여기서 transition 이벤트를 사용하지는 않았고요, 그냥 단순하게 0.5초 후 애니메이션을 none으로 처리하도록 했어요.

class IlbuniPointer {
	constructor() {
		let elem = document.createElement('div');
		let timerId;

		elem.style.cssText = `
			position: absolute;
			left: 0;
			top: 0;
			width: 60px;
			height: 60px;
			margin: -30px 0 0 -30px;
			border-radius: 50%;
			background: url('../images/ilbuni2.png') no-repeat 0 0 / cover;
			transform: scale(0);
		`;

		document.body.appendChild(elem);

		window.addEventListener('click', e => {
			elem.style.animation = 'pointer-ani 0.5s linear';
			elem.style.left = `${e.clientX}px`;
			elem.style.top = `${e.clientY}px`;
			timerId = setTimeout(() => {
				elem.style.animation = 'none';
				clearTimeout(timerId);
				timerId = null;
			}, 500);
		});
	}
}