Why transition does not work on first click event?

Question

I try to move a div(#ball) inside another the div(#square) to click point by Javascript. The first click would move #ball without transition duration 1s. But from second click things work normally until I refresh the Html page.

I use a new Chrome browser.

Html

CSS

#square {
  /*background-color, width etc */
  position: relative;
}

#ball {
  /*background-color, width etc */
   position: absolute;
   transition-duration: 1s;
}

Javascript

let square = document.getElementById('square');
let ball = document.getElementById('ball');

square.addEventListener('click', (event) => {
    ball.style.top = event.pageY + "px";
    ball.style.left = event.pageX + "px";  
});

user_10549313 · Answer

Without specifying a top and left for the #ball element, they default to auto

Now, when transitioning from auto => 100 for example, there is no transition happening since auto is not a number

Specifying an initial top and left left will make this work

let square = document.getElementById('square');
let ball = document.getElementById('ball');

square.addEventListener('click', (event) => {
  ball.style.top = event.pageY + "px";
  ball.style.left = event.pageX + "px";
});

#square {
  background-color: grey;
  width:90%;
  height:90vh;
  position: relative
}

#ball {
  background-color:blue;
  width:20px;
  height:20px;
  top:0;
  left:0;
  position: absolute;
  transition-duration: 1s;
}

Why transition does not work on first click event?

1 Answers