CSS position transition not working at all when set with JavaScript

Question

I want to do the following things:

show a div element;
move it to a an initial position;
set transition properties;
move it to the target position using CSS transition.

A minimal example:

function bla() {
  /*
    var obj = $('#box');
    obj.css("left", "200px");
    obj.css("display", "initial");
    obj.addClass("trans");
    obj.css("left", "500px");
  */

  var elem = document.getElementById('box');
  elem.style.left = "200px";
  elem.style.display = "initial";
  elem.className = "box trans";
  elem.style.left = "500px";
}

#btn {
  position: fixed;
  top: 60px;
  left: 0px;
  width: 50px;
  height: 50px;
  background-color: #FEDCBA;
}
.box {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  background-color: #ABCDEF;
}
.box.trans {
  -webkit-transition: left 2s;
  -moz-transition: left 2s;
  transition: left 2s;
}

<div id="box" class="box"></div>
<div id="btn" onclick="bla()">click here</div>

JSFiddle.

It does not work at all. What is wrong?

If I set the element initially visible, I get a smooth transition starting from the origin left:0 which is totally strange because I assign elem.style.left = "200px"; before I actually add the transition properties...

If you're using CSS transforms, wouldn't it be easier to stick your new styles in a class and simply add that class? — DBS
– DBS, Commented Feb 10, 2017 at 15:53
Unfortunately i can't because i have to calulate the position. — DyingSoul
– DyingSoul, Commented Feb 10, 2017 at 16:01

EikiProg · Accepted Answer · 2017-02-15 11:23:54Z

You should avoid using style in javascript, just switch class years put all your animation in your css file.

You can't put transition together with display: none;, you have to use opacity: 0; instead.

function bla()
{
	var obj = $('#box');
	obj.toggleClass("trans");
}

#btn
{
  position:fixed;
  top:60px;
  left:0px;
  width:50px;
  height:50px;
  background-color:#FEDCBA;
}

.box
{
  opacity: 0;
  position:fixed;
  top:0px;
  left:0px;
  width:50px;
  height:50px;
  background-color:#ABCDEF;
  -webkit-transition: transform  2s,opacity  2s;
  transition: transform  2s,opacity  2s;
}

.box.trans
{
  opacity: 1;
  -ms-transform: translate(500px,0); /* IE 9 */
  -webkit-transform: translate(500px,0); /* Safari */
  transform: translate(500px,0);
	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="box">
</div>
<div id="btn" onclick="bla()">
click here
</div>

kevin.groat · Accepted Answer · 2021-10-04 20:55:08Z

2

DOM changes don't take effect until they can be rendered. Javascript is single-threaded (meaning you cannot run two pieces of code simultaneously), and run on the same thread as the render cycle.

Because of this, the renderer cannot fire unless you give it time to look at the new state of the DOM by deferring execution of your JS code (using setTimeout or requestAnimationFrame). So unless you give the browser time to render, only the final value before the renderer gets to look at the DOM is what matters.

This answer to a previous question goes over the exceptions to the rule.

Here's an updated version of your jsfidde that uses requestAnimationFrame to get around the issue.

edited Oct 4, 2021 at 20:55

answered May 2, 2018 at 14:32

kevin.groat

1,29413 silver badges22 bronze badges

1 Comment

ProjectDiversion Over a year ago

After 2 hours of searching and groaning, THIS was the comment that saved my sanity. Thank you.

Baro · Accepted Answer · 2017-02-10 16:03:05Z

1

I can not explain why. Maybe someone could, I'd be curious too, but with a time-out works.

setTimeout(function(){
    elem.style.left = "500px";
},1);

It is probably too fast assigning properties left 500 and the transition to record the old location 200?

https://jsfiddle.net/StepBaro/s82rj48q/2/

edited Feb 10, 2017 at 16:03

answered Feb 10, 2017 at 15:57

Baro

5,5932 gold badges21 silver badges43 bronze badges

2 Comments

DyingSoul Over a year ago

Yes i thought about that it could be a timing thing.. but it does not make sense because this would violate the order of the calls. When i set the position to 200 then it should set the position. It must not wait with the change after the next instructions..

Baro Over a year ago

Evidently the instructions running simultaneously. I tried to replace the timeout with a very long for loop, and does not work, I think it not refresh the dom, I do not know if you have other solutions. Or jquery, but it is the same logic jsfiddle.net/StepBaro/s82rj48q/9

Joan Miquel · Accepted Answer · 2017-02-10 16:10:03Z

0

It's because you have the div hidden, so it first need to display it and then add the transition, that is why it needs the delay.

answered Feb 10, 2017 at 16:10

Joan Miquel

2862 silver badges8 bronze badges

3 Comments

DyingSoul Over a year ago

Yeah that's why i call elem.style.display = "initial"; first to display it. I even change its position after i displayed it.

Joan Miquel Over a year ago

Yes, but you are doing both things at the same time

Joan Miquel Over a year ago

You could bind the animation to the display change. Once you display it then launch the animation. But you definitely need to first display it, otherwise it will do both things at the same time.

Collectives™ on Stack Overflow

CSS position transition not working at all when set with JavaScript

4 Answers 4

Comments

1 Comment

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related