0

I am sequentially setting and resetting the left position of an element. I DO NOT expect to "see" the element animate from one position to the next. I do expect that see that setting the element left 150%, -150% and 0% would return different positions in the console. Instead, the first and second set positions are the same value despite being different percentages.

document.getElementById("trigger").addEventListener("click", doStuff, false);

function doStuff() {
  console.log("doing stuff");
  let newBox = jQuery('#hole2');
  console.log("initial position:"+newBox.css('left').toString());
  
  //move newBox to starting position instantly (no sliding)
  newBox.css('left','-150%');
  console.log("first position:"+newBox.css('left').toString());
  
  newBox.addClass("smooth_me");
  //move newBox again
  newBox.css('left','0%');
  console.log("second position:"+newBox.css('left').toString());
};
.holecontent {
        position: absolute;
    left: 150%; 
    height: 100%;
    width: 100%;
    background-color: white;
    }
  

.smooth_me {
  transition: ease-in 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="holecontent" id="hole2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae nibh ut felis dictum tincidunt quis et leo. Cras placerat quam ex, ut mattis diam scelerisque at. Integer suscipit lorem sapien, eu volutpat tortor vehicula ac. Ut varius augue vel nunc convallis, consectetur aliquet mi maximus. Vestibulum sit amet elementum justo. Ut volutpat lobortis augue. Mauris iaculis eros at neque pharetra, eget lobortis lacus fermentum. Maecenas non malesuada quam, vitae euismod turpis. Donec imperdiet dignissim condimentum. Donec convallis mi enim, id lacinia eros venenatis nec. Curabitur sapien mi, malesuada et risus mollis, viverra posuere lacus.
</div>
<button id="trigger">Trigger</button>

tl;dr left:-150% and left:0% are returning the same value, why is that?

edit:added tl:dr & added console.log & clarified why this isn't about css animations

fluffybacon
  • 36
  • 3
  • All 4 lines are executed one by one, without waiting for css animation to finish. – Salman A Mar 18 '22 at 16:28
  • I understand that: I do not want the first move animated, it needs to be instant. What I don't understand is left:-150% and left:0% returning the same pixel position. – fluffybacon Mar 18 '22 at 16:40

0 Answers0