内联JavaScript从负位置过渡到CSS样式

Question

I have a fiddle that has two small boxes inside a larger box .

When either of the buttons "Run B" or "Run C" is clicked, the corresponding box is run through a CSS transition, effected via JavaScript. The code is reproduced here with comments:

  // Get the specified box
  var element = document.getElementById(id);

  // Save initial style for resetting
  var initial = element.style.cssText;

  // Initialise transition
  element.style.position = 'relative';
  element.style.transition = 'top 800ms ease';

  // Set start position
  element.style.top = '-50px';

  // Effect the transition in the next cycle
  // by setting the end position
  setTimeout(function(){

    element.style.top = '15px';

  }, 25);

// Reset the style on completion
setTimeout(function(){

    element.style.cssText = initial;
}, 800);

You should be able to observe that each transition is quite different. However, the only difference between the two boxes is the CSS property top: 0 set in the stylesheet.

Can someone please explain why the transitions are different?

Since the style for the element is set inline, I would have expected that to override the CSS style, but that is not happening. Why does the top: 0 have any impact at all?

Answer 1

I'll do my best to explain: You are setting the top to -50px and then you have a setTimeout which sets it to 15px ;

Since #b have a starting position of 0px , it will start animating to -50px but after 25 mllis it will get a new position of 15px and it will animate there instead (you can see that if you give the first setTimeout a longer time like 100). Since 25 millis is very short, it looks like it immediately starts to go down.

Since #c does not have a starting position, when you set it to -50 you actually give it a starting position and then it animates from -50 to 15px;

I hope I've managed to clarify it :)