css - 展开带有动画的左侧 div 导致 "shakeness"

Question

我有一个带有左右两侧的 div 容器。单击按钮时，我需要使左侧部分向左侧变大(您可以在 this 中查看示例)。

动画确实发生了，但是所有的 div 都在过渡过程中摇晃。

如果我将容器从使用transform 更改为top 和left，一切正常，如您所见 here .

不幸的是，这对我来说在现实生活中是不可能的，因为我使用的是使用“转换”的第三方库。

如何保持 transform 属性并使动画流畅？

Answer 1

transform和width不能一起使用

margin-left: -??px; transition: margin-left 3s;

document.querySelector('#button').addEventListener('click', function(){
  let wrap = document.querySelector('.wrap');
  wrap.className = wrap.className.indexOf('expand') === -1 ? 'wrap expand':'wrap'
})

.wrap{
  width: 300px;
  height: 100px;
  box-shadow: 0 0 3px #000 inset;
  float: right;
  margin-right: 40%;
  margin-top: 50px;
  transition: width 3s;
}
button {
  position: absolute;
}
.expand.wrap {
  width: 400px;
}
.right {
  float: right;
  width: 200px;
  height: 100%;
  box-shadow: 0 0 3px orange inset;
}
.left {
  margin-right: 200px;
  background-color: orange;
  box-shadow: 0 0 3px red inset;
  height: 100%;
}

<button id="button">button</button>
<div class="wrap">
  <div class="right">right</div>
  <div class="left">left</div>
</div>

document.querySelector('#button').addEventListener('click', function(){
  let wrap = document.querySelector('.wrap');
  wrap.className = wrap.className === 'wrap' ? 'wrap expand':'wrap'
  let left = document.querySelector('.left');
  left.className = left.className === 'left' ? 'left expand':'left'
})

.wrap{
  width: 200px;
  height: 100px;
  box-shadow: 0 0 3px #000 inset;
  transform: translate(100px, 50px);
  transition: margin-left 3s, width 3s;
  display: flex;
  background-color: grey;
}
button {
  position: absolute;
}
.expand.wrap {
  width: 250px;
  margin-left: -50px;
}
.left {
  background-color: orange;
  box-shadow: 0 0 3px red inset;
  height: 100%;
  width: 50px;
  transition: width 3s;
}
.left.expand {
  width: 100px;
}
.right {
  box-shadow: 0 0 3px orange inset;
}

<button id="button">button</button>
<div class="wrap">
  <div class="left">left</div>
  <div class="right">right</div>
</div>