Css 用“动画原因”展开div left；“安定性”；

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

动画确实会出现，但所有的div都会在转换过程中受到震动

如果我将容器从使用

transform

更改为

top

和

left

，您可以看到，一切都正常

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

---

如何保持

transform

属性并使动画流畅？

不能同时使用

transform

和

width

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

document.querySelector（“#按钮”）.addEventListener（'click'，function（）{
让wrap=document.querySelector（'.wrap'）；
wrap.className=wrap.className.indexOf（'expand'）=-1？'wrap expand'：'wrap'
})

.wrap{
宽度：300px；
高度：100px；
盒影：0 0 3px#000插图；
浮动：对；
右边距：40%；
边缘顶部：50px；
过渡：宽度3s；
}
钮扣{
位置：绝对位置；
}
.展开.wrap{
宽度：400px；
}
.对{
浮动：对；
宽度：200px；
身高：100%；
盒影：0 0 3px橙色插页；
}
.左{
右边距：200px；
背景颜色：橙色；
盒影：0 0 3px红色插页；
身高：100%；
}

按钮
正确的
左边

使用“变换”时，避免使用高度、宽度、边距、填充过渡。仅使用“变换”，或仅使用高度、宽度、边距、填充…如果我不设置

宽度的动画，宽度会立即改变，并且从右侧开始变大。如果我不设置
变换的动画，容器会立即跳到左侧。因此，我不知道如何避免
transform
或
width