Question

我有3 divs彼此相邻，背景div。我们会调用背景div bg div。每当选择3个divs中的一个时，bg div就会位于所选div之上。（基本上，类似于分段控制器。）

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

transition: left linear .2s;

第一次选择div时，动画不会发生，但bg div确实会移动到正确的位置（只是没有动画）。在第二次点击之后，它会起作用。

如何向bg div添加转换？

JSFiddle

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

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

希望这会有所帮助。

Answer 2

您应该为css left: 0;

添加 #back 属性

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

将过渡应用于div

JSFiddle

2 个答案: