在div中过渡

Question

我在同一行有三个不同的盒子。我希望在框内单击时在这些框中进行转换。 现在，当我点击任何一个框时，它将从左向右扩展并获得全宽，其他框在下一行堆叠。我想要的是当我点击红色框时，该框必须从左到右展开，与剩余的框重叠。 类似地，当我单击绿色框时，它必须从其两侧展开并在左侧和右侧重叠两个框并获得全宽。类似地，当我点击蓝色框时，它必须从左侧展开并填充与剩余框重叠的宽度。 任何人都可以帮助我吗？

我的代码是：

Action

Jsfiddle link

Answer 1

转换transform: scale()，这将允许元素扩展到其他元素。您可以通过js为该属性分配一个类来进行转换，您可以在纯CSS中执行此操作。由于每个元素的宽度为20％，因此转换scaleX(5)将为100％。并使用transform-origin更改元素扩展的方向。

＆＃13;

＆＃13;

var containerWidth = $(".container").width();
$(".box").click(function() {
  var id = $(this).attr("id");
  $(this).addClass('scale');
});

＆＃13;

.box {
  width:20%;
  height: 200px;
  margin: 10px;
  float:left;
  transition: transform .5s;
  transform-origin: 0 0;
}
#first {
  background-color: red;
}
#second {
  background-color: green;
  transform-origin: center center;
}
#third {
  background-color: blue;
  transform-origin: 100% 0;
}

.scale {
  transform: scaleX(5);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
		<div id="first" class="box"></div>
		<div id="second" class="box"></div>
		<div id="third" class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

虽然如果元素在父级内均匀分布，这种效果会更好，但它们会重叠并均匀地填充父级。在父级上使用display: flex; justify-content: space-between;可以启用。

＆＃13;

＆＃13;

var containerWidth = $(".container").width();
$(".box").click(function() {
  var id = $(this).attr("id");
  $(this).addClass('scale');
});

＆＃13;

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  width:20%;
  height: 200px;
  transition: transform .5s;
  transform-origin: 0 0;
}
#first {
  background-color: red;
}
#second {
  background-color: green;
  transform-origin: center center;
}
#third {
  background-color: blue;
  transform-origin: 100% 0;
}

.scale {
  transform: scaleX(5);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
		<div id="first" class="box"></div>
		<div id="second" class="box"></div>
		<div id="third" class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;