Grow your CSS skills. Land your dream job.

Transition Elements on Reflow

  • # 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.

    Ed
    # November 14, 2013 at 4:38 pm

    I might misunderstand, but I think this is what you want.

    # 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).

    Observe.

    # 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 :)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".