-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
클릭 이벤트
21.03.10 14:30 작성 조회수 95
0
1분코딩님 항상 좋은 강의 감사합니다! :) section5에 이벤트 위임 보강편에서 화면을 클릭하실 때마다 일분이 사진 잔상이 떴는데 이런 식으로 구현하는 건가요?!
답변을 작성해보세요.
1
1분코딩
지식공유자2021.03.11
잔상이 사라진 후(즉, 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);
});
}
}
답변 1