用动画向左展开 div 会导致“抖动”答案

【问题标题】：Expand div left with animation causes "shakeness"用动画向左展开 div 会导致“抖动”
【发布时间】：2020-01-04 21:35:35
【问题描述】：

我有一个左右两侧的 div 容器。单击按钮时，我需要将左侧部分向左侧变大（您可以在this 中看到一个示例）。

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

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

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

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

【问题讨论】：

使用'transform'时，避免使用height,width,margin,padding过渡。只使用'transform'，或者只使用height,width,margin,padding ...
如果我不对width 设置动画，宽度会立即改变并且从右侧变大。如果我不对transform 设置动画，容器会立即跳到左侧。因此，我看不出如何在transform 或width 上避免动画

标签： css animation transform

【解决方案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>

【讨论】：