展开 div 左边有动画原因 "shakeness"

Question

我有一个 div 容器，有左右两边。当点击一个按钮时，我需要让左边的部分向左变大（你可以在 this 中看到一个例子）。

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

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

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

如何保持 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>

展开 div 左边有动画原因 "shakeness"

Expand div left with animation causes "shakeness"

css

animation

transform