작성한 질문수 17

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);
		});
	}
}