Animating Flexbox with CSS Transition

Everyone already knows about Flexbox. Someone is testing it on production, someone is just studying, and someone is perplexed than he is better than tables. While you are doing this, I’ll share the good news with you: flexible containers can be animated quite well using the CSS transition.

I’ll tell you how to use it and what you can do with this joy.

By animation, I mean resizing containers. It would seem that nothing surprising, because there is transition: width 0.3s ease. However, animation of flexible elements implies that the dimensions of several containers change simultaneously. This gives simply unlimited scope for animating resize layouts. For example, a menu is now very popular, which collapses, leaving only icons visible.


Watch the demo on Codepen.io

To make such a menu with the usual containers, you need to synchronously animate the change in the width of two containers. On the other hand, if we discard the conventions of the need to support older browsers, you can do the same markup with Flexbox. Then you can use the following code for the animation:

.menu {
  flex: 0.0001 1 180px;
  transition: flex 0.3s ease;
}
.collapsed .menu {
  flex: 0.0001 1 48px;
}

The code for animating resizing fits on one line. As the CSS property to be animated, we pass "flex".
The flex-grow value looks a little strange here. This is an extensibility factor that indicates how well the container will stretch relative to other containers if the parent element has free space after calculating the base sizes of the nested elements. The smaller this value relative to others, the less the container will expand. If you use the value 0, then the width (or height) of the element will be fixed. If the width is fixed, then there is a problem with the animation: an older version of Google Chrome completely refused to animate the resizing when the flex-grow value is zero. It is likely that in some versions of browsers this problem still exists.

Photo gallery


Let's go a little further: take 5 photos, arrange them on one line.


When you hover, we will show the selected photo in a larger format


We will use Flexbox to arrange the photos, and insert the images through background-image:


.items-row {
  display: flex;
  flex-flow: row nowrap;
}
.item {
  flex: 1 1 20%;
}
.img1 {
  background-image: url('http://lorempixel.com/400/400/?1');
  background-repeat: no-repeat;
}


All elements of the flex container initially occupy 20% of the width and expand / contract equally. To make the active element grow when you hover, add a rule that sets a fixed width of 400 pixels and reduces the expandability / compressibility of the element to almost zero:

.item:hover {
  flex: 0.000000001 0.00000001 400px;
}

Now, when you hover over the cursor, all inactive elements will be compressed, because they have a flow-shrink value of 1, and the active element will remain 400 pixels wide, because it is almost incompressible.

The final touch is adding animation:

.item {
  transition: flex 0.4s ease;
}

Watch the demo on Codepen.io

If you go even further, you can take several rows of photos and, when you hover, increase not only the width, but also the height. To do this, repeat the same thing, but with flex-flow: column nowrap;.


But what happens if you hover over a photo


Watch the demo on Codepen.io

Performance


A rare discussion of animation goes without talking about FPS. Therefore, on my leisurely computer, I measured the FPS for the last demo. And here is what I got:



Yes, it looks pretty good. Anyway, I somehow measured the speed of rendering an interface made using Flexbox and a similar one made on floats. Interfaces included 1,500 elements. The difference in rendering was about 10 ms on the desktop and about 15-20 ms on the mobile device. Therefore, if performance is a decisive factor for you, then you will lose a little.

Browser support


Unfortunately, this is not cross-browser joy. Since Flexbox works in IE10 +, respectively, and its animation will work no less than from version 10. As Reon correctly noted , the code above will not work in IE at all. It is hoped that Microsoft will follow the example of other browsers and eventually begin to support this animation. On the other hand, for the given example it is not difficult to make a fallback, which will more or less decently display photos in a small size and enlarge them using some kind of extension.

conclusions


  • Animate change flexbox-sized items easily: transition: flex 0.4s ease;;
  • Non-zero (0.000001) flex-grow and flex-shrink values ​​can fix everything if the animation doesn't work;
  • In terms of performance, the animation of Flexbox containers is almost inferior to the animation of div elements with float;
  • This is a very fresh solution, so use it with caution, and test as much as possible.


Useful materials



Also popular now: