我在 Vue 应用程序中有一个博客文章的“网格”，需要在点击时进行动画处理，以作为单个文章视图扩展到全屏。它需要从“缩略图”或“预览”在扩展到全屏时在网格中的相同位置增长，然后关闭回到它在网格中的位置。
（另一个意图是点击的每篇博客文章都将是它自己的路线，以便您可以从外部导航到它）
我在尝试实现这一点时遇到的事情：
我尝试使用相同的元素并将其动画化为：
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
...等扩展时，但您不能为position属性设置动画。
所以，我的帖子必须在过渡之前已经绝对定位，否则它只会跳跃而不是动画。但是，我真的不想绝对定位从 Vue 中的 v-for 循环自动生成的网格中的元素。
我见过一些解决方案，其中有网格，然后将完整的帖子隐藏在页面上，点击时不透明度会淡入，但该解决方案需要滚动偏移跟踪，以使其看起来像是从网格内的缩略图增长而来。
希望我已经很好地说明了这个问题，以便清楚我要完成的任务。如果有人有在 Vue 或 React 中制作类似动画的经验，那将会很有帮助。谢谢！
编辑：需要明确的是，我已经处理了 Vue 应用程序的状态部分，所以当我点击我的帖子（只是不是正确的）时，我目前能够让动画发生，主要问题更可能是 CSS VueJS框架内的问题。