Question

我有fiddle that has two small boxes inside a larger box。

单击“运行B”或“运行C”按钮时，相应的框将通过CSS进行CSS转换。代码转载于此处，注释：

  // 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);

您应该能够观察到每个过渡都是完全不同的。但是，这两个框之间的唯一区别是样式表中设置的CSS属性top: 0。

有人可以解释为什么过渡不同吗？

由于元素的样式是内联设置的，我原本希望覆盖CSS样式，但这种情况不会发生。为什么top: 0会产生任何影响？

Answer 1

我会尽力解释：您将顶部设置为-50px，然后设置setTimeout，将其设置为15px;

由于#b的起始位置为0px，因此它会开始设置为-50px，但是在25 mllis之后它会获得15px的新位置并且它将会生成动画相反（你可以看到，如果你给第一个setTimeout更长的时间，如100）。由于25毫米非常短，看起来它立即开始下降。

由于#c没有起始位置，因此当您将其设置为-50时，实际上会将其设置为起始位置，然后将其设置为-50到15px;

我希望我能够澄清它：）

从CSS样式

1 个答案: