javascript - 将过渡应用到 div

Question

我有 3 个 div 并排放置，还有背景 div。我们将背景称为 div bg div。每当3 divs 选择时，BG div 就位于所选 div 的顶部。 (基本上，类似于分段 Controller 。)

当我尝试将 bg div 转换到它的新位置时。我做了以下转换:

transition: left linear .2s;

当您第一次选择 div 时，动画不会发生，但 bg div 会移动到正确的位置(只是没有动画).第二次点击后，它开始工作。

如何向 bg div 添加过渡？

JSFiddle

$('.inner').click(function() {
  var pos = $(this).position();
  $("#back").css('left', pos.left + "px");
});

#wrapper {
  width: 600px;
  height: 30px;
  position: relative;
}
.inner {
  display: block;
  float: left;
  width: calc(100% / 3);
  height: 50px;
}
#back {
  background-color: yellow;
  height: 100%;
  z-index: -1;
  width: calc(100% / 3);
  position: relative;
  transition: left linear 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="inner">First Option</div>
  <div class="inner">Second Option</div>
  <div class="inner">Third Option</div>
  <div id="back"></div>
</div>

Answer 1

要使转换生效，应该定义一个初始值，动画将从该值开始。

这里 #back 没有初始的 left 值，因此在第一次点击时，它会直接跳到 left 位置单击时定义。 这将作为下一个过渡的初始值，因此从那时起您将看到过渡中的动画。

因此，您需要做的就是在 #back 的 css 中添加 left:0px;。

希望这对您有所帮助。