Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Transition Elements on Reflow

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #156097
    Bretto
    Participant

    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.

    #156153
    Bretto
    Participant

    No sorry, it’s not about media queries…

    #156169
    __
    Participant

    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.

    #156761
    Bretto
    Participant

    @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 ;)

    #156763
    Paulie_D
    Member

    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.

    #156770
    Bretto
    Participant

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

    #252714
    oronymo
    Participant

    @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.

    Thanks!

    #252715
    Beverleyh
    Participant

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

    #252725
    oronymo
    Participant
    #252726
    Beverleyh
    Participant

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

    #252728
    oronymo
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.