Why css transition happens when CSS properties are not changed?

Question

At first I change "left" css property, then I add transition property which looks for "left" changes and it executes animation. Could someone explain me why does it happen? I thought that it should change position of element and then looks for transition, but it doesn't.

var button = document.getElementById('slide');
button.onclick = function() {
    var view = document.getElementById('view');
    view.style.left = '-100px';
    // Why does transition happen? O_o
    view.style.transition = 'left 500ms ease-out';
}

http://jsfiddle.net/martyn0FF/20kvbvua/

jfriend00 · Accepted Answer · 2015-03-22 06:46:28Z

Redraw and animation operations are deferred until the currently executing thread of JS finishes so that the browser can examine everything that has changed and act on those changes just once rather than trying to keep up with every change as it is made.

As such, it seems your changes to style.transition and style.left are connected and seen at the same time.

If you want to disconnect them, you can force a relayout by requesting one of several interesting properties (such as .offsetHeight) that trigger a relayout after you've set the .left property, but before you've set the .style.transition property like this:

var button = document.getElementById('slide');
button.onclick = function() {
    var view = document.getElementById('view');
    view.style.left = '-100px';
    // trigger layout by requestion offsetHeight
    var x = view.offsetHeight;
    view.style.transition = 'left 500ms ease-out';
}

Notice in this jsFiddle with this code that the new left value takes place immediately and it is not animated.

Collectives™ on Stack Overflow

Why css transition happens when CSS properties are not changed?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related