Dynamically set css transform before transition

Question

I am trying to simulate a mouse animation. I would like to dynamically set the position, then move it with a css transition. So far I am able to get a program that moves the mouse. However, I am having trouble setting the initial position dynamically with javascript. My code looks like this:

Here is the CSS

.cursorDiv {
  width: 30px;
  height: 30px;
  transform: translate(0px,0px);
  transition: 2s ease;
}

.cursorDivMoved {
  transform: translate(100px,200px);
}

Here is the javascript:

var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-                    style/512/cursor.png";
document.body.appendChild(cursorDiv);

setTimeout(function() {
  $(".cursorDiv").toggleClass("cursorDivMoved");
}, 1000);

//cursorDiv.style.transform="translate(100px,50px)";

When I run this it works fine. However, when I try to change the initial position with javascript (uncomment last line), then the transition doesn't occur anymore.

Here is a Demo:

https://jsfiddle.net/fmt1rbsy/5/

ghybs · Accepted Answer · 2015-11-22 02:46:11Z

If you programmatically set the style.transform property directly on your element (which you need if you want to move it to an arbitrary position through JS), it will override any transform specified in classes. Hence adding "cursorDivMoved" class later on does not transform (translate / move) it.

You have to continue moving it by specifying its style.transform property, or simply remove it: cursorDiv.style.transform = null

Demo: https://jsfiddle.net/fmt1rbsy/9/

You may also want to have the very first translate being transitioned. In that case, you have to wait for the browser to make an initial layout with your element at its start position, otherwise it will see no transition (it will see it directly after the transform is applied, i.e. at its final position). You can either:

Use a small (but non zero) setTimeout to give some time for the browser to do its initial layout.
Force a browser layout by trying to access some property that require the browser to compute the page layout (e.g. document.body.offsetWidth).
Use 2 nested requestAnimationFrame's before applying your transform.

Demo: https://jsfiddle.net/fmt1rbsy/8/

www139 · Accepted Answer · 2015-11-22 02:41:11Z

0

Is this what you are looking for? Tell me if it can be improved. Open your console and change the class name to cursorDivMoved.

var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.id = 'cursorDiv';
cursorDiv.src = "https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/cursor.png";
document.body.appendChild(cursorDiv);

#cursorDiv {
width:30px;
height:30px;
-o-transition: 2s ease;
-moz-transition: 2s ease;
-webkit-transition: 2s ease;
-ms-transition: 2s ease;
transition: 2s ease;
}
.cursorDivMoved {
-o-transform:translate(100px, 200px);
-moz-transform:translate(100px, 200px);
-webkit-transform:translate(100px, 200px);
-ms-transform:translate(100px, 200px);
transform:translate(100px, 200px);
}

edited Nov 22, 2015 at 2:41

answered Nov 22, 2015 at 2:31

www139

5,2373 gold badges39 silver badges65 bronze badges

2 Comments

user1763510 Over a year ago

What I want to do is dynamically set the initial and final positions of the cursor using javascript.

www139 Over a year ago

Ok, I will revise my answer.

Phuong · Accepted Answer · 2015-11-22 03:05:01Z

0

You can define initial postion (x,y), and then when user click the position will increase and set to the 'cursorDiv', such as:

var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/cursor.png";
document.body.appendChild(cursorDiv);
var x = 100, y = 50;
setTimeout(function() {
  cursorDiv.style.transform="translate(100px,50px)";
}, 1000);

$(document).click(function () {
    x+= 20;
            y += 50;
    var str = "translate(" + x + "px," + y + "px)";
    cursorDiv.style.transform=str;
        });

Here is Demo

edited Nov 22, 2015 at 3:05

answered Nov 22, 2015 at 2:59

Phuong

351 silver badge6 bronze badges

Collectives™ on Stack Overflow

Dynamically set css transform before transition

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related