• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

공 색을 추가해서 바꿨는데 이렇게 코딩했을 경우 transitionstart 값은 어디에 주면 되나요 ?

21.09.24 17:59 작성 조회수 126

0

아래 다른 분이 질문해주신 것을 토대로 아래와 같이 코딩을 해서 색을 추가해서 변형하게 끔 만들었는데 이런 경우에 default가 transition end로 되어있는 것 같아, tansitionstart로 값을 변경하려면 어떻게 코딩을 해야할까요 ?

<script>
        const ballElem = document.querySelector('.ball');

        let A = 1;

        window.addEventListener('click'function (e) {
            ballElem.style.transform = 'translate(' + (e.clientX - 15+ 'px,' + (e.clientY - 15+ 'px)';


            if (A === 1) {
                ballElem.classList.add('end');
                A = 2;
            } else if (A === 2){
                ballElem.classList.remove('end');
                ballElem.classList.add('end2');
                A = 3
            } else {
                ballElem.classList.remove('end2');
                A = 1
            }
       });
</script>
 

답변 1

답변을 작성해보세요.

0

제가 질문하신 의도를 정확히 파악한지 모르겠는데..
transition-delay 속성으로 원하는 타이밍을 쉽게 조절할 수 있습니다.
transition-delay: 1s; 이렇게 쓰면 1초 지연 효과고요,
축약형으로
transition: 1s 2s; 이런식으로 쓰면 먼저 쓴 1s는 duration(재생시간), 뒤에 쓴 2s는 delay(지연시간)이 되겠습니다 :)