Transition doesn't work at first time

Question

I have a problem with transition property. Namely, it works only after first time. At the first time there is no transition effect.

JS code:

document.addEventListener("DOMContentLoaded", function() {

  var second = document.querySelector('.square');

  if(second) {
      second.addEventListener("mouseenter", function() {
          var maxX = Math.floor(Math.random() * (window.innerWidth - 200));
          var maxY = Math.floor(Math.random() * (window.innerHeight - 200));
          this.style.left = maxX + 'px';
          this.style.top = maxY + 'px';
          this.style.transition = 'left 2s, top 2s';
      });
  }

 });

CSS code:

* {
margin: 0;
padding: 0;
}

main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.second {
height: 200px;
width: 200px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}

EDIT:

JSfiddle

UPDATE:

Moving transition to CSS doesn't change anything. Square has to be centered and can't leave the window.

Can you please provide with a jsfiddle? so that it becomes easy to figure out — Akhil Arjun, May 30 '18 at 09:45
My guess is because you are adding the transition with JS, move it to CSS — Temani Afif, May 30 '18 at 09:48

fen1x · Accepted Answer · 2018-05-30T10:33:00.830

Move transition, top and left to css - browser should know what to transition from and how to transition before you set new X and Y.

document.addEventListener("DOMContentLoaded", function() {

  var second = document.querySelector('.square');

  if(second) {
      second.addEventListener("mouseenter", function() {
          var maxX = Math.floor(Math.random() * (window.innerWidth - 200));
          var maxY = Math.floor(Math.random() * (window.innerHeight - 200));
          this.style.left = maxX + 'px';
          this.style.top = maxY + 'px';
      });
  }

 });

.square {
  background:red;
  height: 200px;
  width: 200px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: left 2s, top 2s;
  top: 0;
  left: 0;
}

<div class="square">
</div>

EDIT 1

If you want to initially center your square - add this

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

document.addEventListener("DOMContentLoaded", function() {

  var second = document.querySelector('.square');

  if(second) {
      second.addEventListener("mouseenter", function() {
          var maxX = Math.floor(Math.random() * (window.innerWidth - 200));
          var maxY = Math.floor(Math.random() * (window.innerHeight - 200));
          this.style.left = maxX + 'px';
          this.style.top = maxY + 'px';
      });
  }

 });

.square {
  background:red;
  height: 200px;
  width: 200px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: left 2s, top 2s;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="square"> 
</div>

EDIT 2

Taking into account your fiddle - you should modify your maxX and maxY calculations because transform property moved center of your square from "top left" to "center center":

document.addEventListener("DOMContentLoaded", function() {

      var second = document.querySelector('.square');

      if(second) {
          second.addEventListener("mouseenter", function() {
              var maxX = 100 + Math.floor(Math.random() * (window.innerWidth - 200));
              var maxY = 100 + Math.floor(Math.random() * (window.innerHeight - 200));
              this.style.left = maxX + 'px';
              this.style.top = maxY + 'px';
          });
      }

 });

* {
    margin: 0;
    padding: 0;
}

main {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.square {
    height: 200px;
    width: 200px;
    position: absolute;
    -webkit-box-shadow: 0px 0px 70px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 70px 5px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 70px 5px rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    transition: left 0.8s, top 0.8s;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
}

<main>
    <div class="square">
        <p>catch me!</p>
    </div>
</main>

It would be okay, but square isn't centered, when top: 0 and left: 0. i need to have this square centered. — Ben, May 30 '18 at 09:56
@Ben You can see how to initially center your square in my edited answer — fen1x, May 30 '18 at 10:04
Yeah it is clear for me now, but in this way square is running out of the window. — Ben, May 30 '18 at 10:09

Transition doesn't work at first time

1 Answers1