如何平滑调整大小的 div 元素的过渡答案

【问题标题】：How to smoothen the transition of a re-sizing div element如何平滑调整大小的 div 元素的过渡
【发布时间】：2021-11-01 00:48:15
【问题描述】：

我们有一个旧的 aspx 内部应用程序。主页获取当前用户的用户名并加载与请求匹配的用户配置文件列表。（是的，多个 AD 域中的用户名可能有多个配置文件）。用户然后选择一个配置文件并可以搜索与该配置文件关联的角色和权限。角色列表将显示在表格中。

我计划使用 Angular（当前稳定版本）提升该门户。我使用 Dribble 作为 UI 设计的参考。我有以下想法在设计中实现，但不确定是否可以实时实现：（第 3 点）。

界面设计：https://i.stack.imgur.com/Vu2Gp.png

以userName 为输入和submit 的表单
以横幅（框）的形式加载用户配置文件
When any of the profiles selected, for example 2nd profile

第一个和第三个框应该消失
所选横幅应采用从其当前位置扩展的整个宽度（平滑过渡），如设计中的大 div 携带有关用户的更多信息

我做了什么：从 Grid 开始显示横幅，但切换到 flex，因为网格不支持动画（来自我的研究）。使用flex，我可以扩展选定的配置文件，但无法按照我喜欢的方式制作动画。 div 总是从左到右加载。尝试了position 属性，keyframes，但所选横幅从最左侧加载，而不是从其当前位置拉伸任一侧（从屏幕中间-> 将任一侧扩展到 100%）。

PS 1：这可能是一个很长的理论，或者解释得更简单。无论哪种情况都执行我:)

PS 2：请注意，我正在寻求指导以实现我的代码设计。所以请不要判断我是在要求别人为我编码。非常感谢为我指明一个方向。

【问题讨论】：

标签： javascript html css angular css-animations

【解决方案1】：

这是一个带有示例的 StackBlitz 链接。将过渡分配给 CSS 属性是此类简单动画的最佳解决方案。

https://stackblitz.com/edit/angular-ivy-gy4cvm?file=src/app/app.component.css

【讨论】：

【解决方案2】：

尝试使用这样的 css 过渡：Using CSS Transitions

您会想要使用 width 属性并设置您想要的任何持续时间。

【讨论】：