对 div 应用过渡答案

【问题标题】：Apply transition to div对 div 应用过渡
【发布时间】：2016-02-26 11:33:50
【问题描述】：

我有 3 个 divs 并排放置，背景为 div。我们将调用背景div bg div。每当3 divs @ 987654328中的一个选择时，BG div将位于所选div的顶部。（基本上，类似于分段控制器。）

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

transition: left linear .2s;

当您第一次选择 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>

【问题讨论】：

可能与stackoverflow.com/questions/18440393/… 重复。为#back 的left 属性设置一个初始值。该线程仅表示 FF，但原因也适用于 Webkit 和其他。
只需添加 left:0;到#back{left:0;} jsfiddle.net/mohamedyousef1980/weaw5v3o/1
@Harry 我不会将此问题称为重复问题，因为实际问题不同。恰好是那里的答案也适用于我。
@Harry 但是是的。当我添加left:0 时，它可以工作。谢谢！ :)
@Harry 你是对的！核心问题是一样的。我和你在这个！ :-)

标签： javascript jquery html css transition

【解决方案1】：

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

$('.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>

【讨论】：

【解决方案2】：

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

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

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

希望这会有所帮助。

【讨论】：