Move element into new position with CSS3 transitions

Question

I am trying to get a gallery working and I am trying to limit the usage of jQuery in this case. As shown in the following screenshot, I always have 2 items beside each other: http://prntscr.com/2gpi01 . They are set to float left and whenever one is removed or set to display none, another item simply takes its place. This working fine, however I want to add a transition, in order for the new item to move into the old item's place. I have seen this quite often online, that by simply removing an item, another item slides smoothly into its new place. Is this somehow possible with CSS3 transitions?

Answer 1

You can animate max-width using transition.

On the click event, you need do add class hidden to the clicked element.

If you have a markup like this:

<ul class="gallery">
    <li><img src="image1" alt=""></li>
    <li><img src="image2" alt=""></li>
</ul>

You can do the animation with the following CSS:

ul.gallery li {
  float: left;
  list-style-type: none;
  transition: max-width 2s;
  max-width: 250px;
  overflow: hidden;
}

ul.gallery li.hidden {
  max-width: 0;
}

ul.gallery li img {
  height: 150px;
  margin: 8px;
}

Here is a demo: http://cssdeck.com/labs/pqbkirfl

Answer 2

That is not possible using CSS, since CSS won't check if any child element is removed or not!

You can try out the animation using

transition: margin-top 2s;

This way, the margin-top change for the element will take place in 2 seconds in an animating way.

But to detect the removal of the element you are required to use jQuery!

Since you want the animation to take place only if the element is removed, you can try out adding class or removing a class for the other elements. This way, when the class is added the animation (CSS) will take place and it will animate its property (margin-top).