2

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.

Zachary Wright
  • 21
  • 3
  • 2
    A great example here: https://tympanus.net/Development/AnimatedGridLayout/ though it does have the technique you are trying to avoid. Maybe make one section only and fill it with content a la JSON call? – Nathaniel Flick Mar 12 '19 at 23:21
  • Yeah, I stumbled across that example as well. That's exactly the idea I'm going for, I was just hoping there was a better way to do it in css or to leverage something with Vue Components and transitions. – Zachary Wright Mar 13 '19 at 21:12
  • Maybe this? https://scotch.io/tutorials/getting-started-with-component-transitions-in-vue – Nathaniel Flick Mar 14 '19 at 01:04
  • Zachary Wright , could you share a fiddle or pen example? – Manuel Abascal Apr 17 '19 at 02:06
  • @ZacharyWright did you ever end up with your version of an animating grid? Any resources or libraries you can share? – Omar Sep 09 '19 at 14:16

0 Answers0