向左设置框的宽度答案

【问题标题】：animate width of a box towards left向左设置框的宽度
【发布时间】：2019-02-06 15:48:02
【问题描述】：

我有一个 div 框

<div style="width: 400px; height: 400px; position: absolute; left: 350px; top: 350px; background-color: #cdcdcd;"></div>

我可以轻松地将其宽度设置为向右移动（左边缘将位于固定位置）。
如何修复框的右边缘并将其宽度向左设置动画？？？
即框将向左侧扩展。

【问题讨论】：

标签： jquery

【解决方案1】：

您可以通过同时为框的左边距和宽度设置动画来做到这一点。或者，如果您的盒子是绝对定位的，请同时为其 left 属性和宽度设置动画。

HTML

<div id="loading"></div>

CSS

#loading {
   margin-left: 200px;
   width: 0;
   height: 10px;
   background: red;
}

jQuery

$('#loading').animate({width: 200, marginLeft: 0}, {duration: 1000});

你可以看到in action here。

【讨论】：

很容易摆脱父容器，它只是稍微窄一些，并设置了overflow: hidden;：jsfiddle.net/nakYV/2 这掩盖了 jQuery 尝试同步动画 2 个属性引起的抖动。您还会注意到，随着持续时间的缩短，由于动画中需要匹配的步骤越来越少，因此不那么明显。
不适用于我的情况，还有其他解决方案吗？我的意思是我不能把它包起来
你的情况如何？其他选项是从右向左移动背景图像或在右边缘覆盖元素以掩盖抖动。

【解决方案2】：

如果我正在正确阅读问题，那么您无论如何都应用了绝对位置，而不是使用左属性使用右属性来定位框然后为宽度设置动画？

http://jsfiddle.net/nakYV/115/ 类似这样的东西。

【讨论】：

【解决方案3】：

<div class="thisIsContainer"> <div id="thisToAnimate"></div></div>

.thisIsContainer { width: 300px; display: flex; justify-content: flex-end; }
#thisToAnimate { width: 200px; transition linear width 0.3s;}

然后假设你想要一个悬停动画：

#thisToAnimate:hover { width: 300px; }

由于 justify-content: flex-end 我们的“盒子”会粘在右边，然后在悬停时它会向左展开。

【讨论】：