I want to do the following things:

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

A minimal example:

```js
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";
}
```

```css
#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;
}
```

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

[JSFiddle](https://jsfiddle.net/s82rj48q/).

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...