将过渡应用到 div

Question

我有 3 个 divs 并排放置，背景 div。我们将背景称为 div bg div。每当 3 divs 之一得到 selected 时，bg div 就会位于 selected div 的顶部。（基本上，类似于分段控制器。）

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

transition: left linear .2s;

当你第一次 select a div 时，动画不会发生，但是 bg div 会移动到正确的位置（只是没有动画).第二次点击后，就可以了。

如何向背景添加过渡 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 位置。这将作为下一个过渡的初始值，因此从那时起您将看到过渡中的动画。

所以您需要做的就是在 css 中添加 left:0px; for #back。

希望对您有所帮助。

Answer 2

您应该为 css 添加 left: 0; 属性 #back

$('.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;
  left: 0;
}

<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>

将过渡应用到 div

Apply transition to div

html

javascript

css

jquery

transition

JSFiddle