I have a "grid" of blog posts in a Vue app that need to be animated on click to expand to the full screen as a single post view. It needs to grow from the same position the "thumbnail" or "preview" was in the grid when it expands to the full screen and then close back down to where it was in the grid.
(Another intent is that each blog post clicked on will be it's own route so that you can navigate to it externally)
Things I've run into when trying to implement this:
I tried using the same element and just animating it to be:
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
...etc when it is expanded, but you can't animate the position property.
So, my posts would have to already be absolutely positioned before the transition otherwise it would just jump and not animate. However, I really don't want to absolutely position elements in a grid that are automatically generated from a v-for loop in Vue.
I've seen some solutions where there is the grid and then the full post is hidden on the page and it's opacity fades in on click, but that solution requires scroll offset tracking to make it seem like it grew from the thumbnail within the grid.
Hopefully I've illustrated the problem well enough to be clear what task I'm trying to achieve. If anyone has experience animating something similar to this in Vue or React that would be helpful. Thanks!
EDIT: to be clear, I've handled the state part of the Vue app, so I currently am able to get animations to happen when I click on my posts (just not the right one), the main question is moreso probably a CSS question within the framework of VueJS.