How to use CSS3 transition to ensure diagonal movement of elements of the inline block?

Question

I have a particular problem that I want to solve with CSS3 transition. Thus, I have a container with elements of the built-in block, and as soon as I select one of the elements, everything else will be hidden, and the selected element should smoothly go to the upper left corner of the container.

For example, I have my container, as shown below, containing 8 elements wrapped in two lines:

= = = = =
Abcd
Efgh
= = = = =

And now I select G, everything else is hidden, and G moves to the upper left corner:

= = = = =
G
= = = = =

My current approach is to set the width and height of all G singles to 0, the CSS3 transition works fine, and I see that G smoothly goes to the left edge. However, since G is in the second line, it jumps up the line when everything on the first line is compressed. This movement is sudden and undesirable. I would like the effect to be like G, smoothly moving diagonally to the upper left corner.

I also looked at translate (x, y), but that is also not good, since I do not want to calculate how many pixels I have to move the box to the top left. It would be ideal if I could just use (position: absolute; left: 0; top: 0) somehow automatically in the upper left corner, but as soon as I set the position to absolute, the element will instantly jump.

Can any CSS3 wizard suggest a good approach?

Answer 1

Not perfect, but here is my solution:

this is html:

<div class="base"> <div class="container"><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child2"></div><div class="child"></div> 

Since you are using an inline block, and I want your divs to fall apart nicely, I don't need to have spaces between them.

And CSS:

 .container, .base { width: 500px; height: 400px; } .base { border: solid 1px black; } .container { -webkit-transition: 1s all linear; } .child, .child2 { width: 120px; height: 80px; display: inline-block; margin: 10px; } .child { -webkit-transition-duration: 1s; -webkit-transition-property: height, width, margin; -webkit-transition-timing-function: linear; background-color: lightblue; } .child2 { -webkit-transition: 1s all linear; background-color: lightgreen; } .base:hover .container { width: 20px; } .base:hover .child { width: 5px; height: 0px; margin: 0px; background-color: silver; } .base:hover .child2 { margin-right: -120px; } 

The idea is to have an extra div between your container and children, the size of which changes at about the same rate as children. Thus, we keep the same layout for the entire transition, in this case 3 divs per line, and we avoid all the elements going on the same line and reset the top of the visible div.

There is a problem in this approach when the container is smaller than a div that is not shrinking; to avoid this, we set the margin-right of the visible element to a negative value, which will allow it to fit well into the container.

I have a problem in the final state, where there is a space between the lines (and the element does not fall into the upper position). This problem does not occur when I have the same code outside the violin; I do not know what causes this.

demonstration