Here are the tasks I want to accomplish:
- Show a div element;
- Move it to an initial position;
- Set transition properties;
- Move it to the target position using CSS transition.
Below is a minimal example:
function modifyElement() {
/*
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="modifyElement()">Click Here</div>The code is not functioning as expected. What could be the issue?
When I set the element to be initially visible, the transition starts smoothly from the origin left:0, even though I assigned elem.style.left = "200px"; before adding the transition properties...