Question

此问题与我已创建transition-in-div的问题有关。我没有得到我的下一个问题的答案所以我决定创建新的问题。我有四个盒子，我希望所有四个盒子都有过渡效果。我想要的是每当我点击任何一个盒子时，该盒子的宽度必须从左侧向左侧和右侧增加以适应整个宽度。现在它只填充宽度的一部分。我的代码是

<html>
<head>
    <title>Transition</title>
    <style type="text/css">
    .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: 25% 75%;
}
#third {
  background-color: aqua;
  transform-origin: center center;
}
#fourth {
  background-color: blue;
  transform-origin: 100% 0;
}

.scale {
  transform: scaleX(4);
}
    </style>
</head>
<body>
    <div class="container">
        <div id="first" class="box"></div>
        <div id="second" class="box"></div>
        <div id="third" class="box"></div>
        <div id="fourth" class="box"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        var containerWidth = $(".container").width();
        $(".box").click(function() {
          var id = $(this).attr("id");
          $(this).addClass('scale');
        });
    });
</script>

Jsfiddle

Answer 1

有一个小的数学错误，当你的尺寸为20％时，你将每个div缩放到4x，所以他们的新尺寸现在是80％而不是100％的宽度。

请考虑以下小提琴：https://jsfiddle.net/m157u2yw/7/

出于预览的目的，我已经做到了这一点，如果你点击一个展开的盒子，它会重新开始，这样你就可以快速播放它。

我使用的是宽度而不是缩放，因为如果这些方块实际上有一些内容（缩放会使其扭曲），它将非常有用。

我还在未点击的div中添加了另一个类.scale-down，以确保它们也可以动画，将完整的空间留给展开的那个。

Answer 2

只需稍微调整一下你的CSS：

由于.box宽度为20％，因此scaleX（）为5，

然后继续修复你的Transform-origin，使其正确覆盖： https://jsfiddle.net/m157u2yw/8/

.box {
  width:20%;
  height: 200px;
  transition: transform .5s;
  transform-origin: 0 0;
}
#first {
  background-color: red;
}
#second {
  background-color: green;
  transform-origin: 33.33%;
}
#third {
  background-color: aqua;
  transform-origin: 66.66%;
}
#fourth {
  background-color: blue;
  transform-origin: 100%;
}
.scale {
  transform: scaleX(5);
}

Answer 3

为什么不将盒子放在容器中并为宽度设置动画，如下所示：

https://jsfiddle.net/pt1vk0c1/

    <div class="container">
        <div id="first" class="box-container">
          <div class="box"> </div>
        </div>
        <div id="second" class="box-container">
          <div class="box"> </div>
        </div>
        <div id="third" class="box-container">
          <div class="box"> </div>
        </div>
        <div id="fourth" class="box-container">
          <div class="box"> </div>
        </div>
    </div>

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

.box-container {
  width:25%;
  height: 200px;
}

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

.scale {
  width:100%;
}

Answer 4

这是一个无论盒子数量或宽度如何都可以使用的解决方案。如果可能的话，最好避免任何魔法数字。

转换宽度而不是转换。您不需要任何变换原点，无论盒子大小如何，它都可以使用任意数量的盒子。

使其他框的宽度为0.您可以向容器添加类。比使用

.container.open .box:not(.scale) {
  width: 0;
}

将没有类.scale的任何框的宽度设置为0

http://codepen.io/flurrd/pen/xqmwLN

CSS

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

.box {
  width: 20%;
  height: 200px;
  transition: width .5s;
  background-color: tomato;
}

.box:nth-child(odd) {
  background-color: aquamarine;
}

.scale {
  width: 100%;
}

.container.open .box:not(.scale) {
  width: 0;
}

JS

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

四个div中的比例转换

4 个答案: