这个问题与我已经创建的问题有关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>
最佳答案
存在一个小的数学错误，当每个 div 的大小为 20% 时，您将其缩放为 4 倍，因此它们的新大小现在为 80% 而不是完整的 100% 宽度。
请考虑以下 fiddle :https://jsfiddle.net/m157u2yw/7/
出于预览的目的，我已经这样做了，如果你点击一个展开的框，它会重置回来，这样你就可以快速使用它。
我使用的是宽度而不是比例，因为如果这些方 block 内部确实有一些内容(缩放会扭曲它)，它会很有用。
我还向未单击的 div 添加了另一个类 .scale-down 以确保它们也具有动画效果，将整个空间留给展开的 div。
关于javascript - 四个 div 中的缩放转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43114247/