Give help. Get help.

  • # November 14, 2013 at 2:34 pm

    Is it possible to transition elements from there current position to the new position after a reflow ? Like if I have a grid of elements and on hover the element size change, forcing a reflow of the page, how to I get the elements to transition to the new position with only CSS ? I know that Masonry.js can do this, but I wonder how do I use the current position of an element in CSS to transition to the next position ? is this even possible ? Thanks for your time.

    # November 14, 2013 at 9:07 pm

    No sorry, it’s not about media queries…

    # November 15, 2013 at 1:07 am

    The example @Ed posted uses media queries to trigger the transition, but there are any number of other events that will also trigger it (such as the hover event you describe).


    # November 20, 2013 at 9:35 pm

    @traq Yes this is correct, but the main point of my question is the transition of objects on reflow… I know that you can transition elements from one absolute position to the next. I would like to know if you can have elements (that are part of the document flow, so no absolute position ) transition from and to the next position with only CSS…

    Basicaly I don’t want to have to hard code top and lef props on all objects, I would like the objs to find there place by the default document layout and just transition auto-magicaly to the next when needed…

    Thanks for your time ;)

    # November 20, 2013 at 10:31 pm

    What exactly would you be transitioning in that case?

    If the elements are in their proper place in the flow and then ‘reflow’ and still have their proper place what has changed?

    The properties that suggest themselves on ‘reflow’ aren’t suitable for transitioning as they are not based on values (float etc).

    In any case, as has been said many times, general users wouldn’t see the effect…it’s only us developers who re-size their screens/viewports.

    # November 20, 2013 at 11:29 pm

    Yep the idea isn’t on resizing the browser… lol it in a list of element an element is removed added or its size changed… thank you for you help :)

    # March 12, 2017 at 11:58 pm

    @Ed your simple CSS based transition demo is quite nice. I have an extra challenge. I have a grid of cards that auto reflow using flexbox (depending on the page size – and I’m actually controlling the specific reflow points using media queries).

    Since it’s effectively just laying out the cards every time it adds a new column, there is no explicit “move” triggered – just the reflowing of the cards inside the flexbox container.

    Is there a way to have this change also trigger a transition? Right now the cards pop into place, but it would be nice if they had some subtle slide in motion.


    # March 13, 2017 at 1:18 am

    Have you got a **basic** CodePen demo for us to tinker with?

    # March 13, 2017 at 9:10 am


    # March 13, 2017 at 10:50 am

    Shouldn’t there be some transitions in the CSS? Something to demonstrate the issues you described?

    # March 13, 2017 at 10:58 am

    resize your browser – you’ll see the grid of cards reflow (e.g. from 2 columns to 3). That’s the “transition.” It’s an implicit (not explicit) transition.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.