Can I transition the flex-grow of a flex box to produce an animation?

by

flex-grow is animatable but only if the value is a <number>. However it seems that Google Chrome (v41) doesn’t trigger the animation if the value is set to 0.

A workaround for this could be to use a very small value instead — something like 0.0001:

Updated example.

$(".item").click(function() {
    $(".item").addClass("collapse");
    $(this).removeClass("collapse");    
});
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;    
}

.container {
    flex-basis: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    transition: all 2s;
}

.collapse {
    flex-grow: 0.001;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="item" style="background: red">a</div>
    <div class="item" style="background: green">b</div>
    <div class="item" style="background: blue">c</div>
    <div class="item" style="background: purple">d</div>
</div>

More Related Contents:

  1. Fade animation while scrolling
  2. Is it possible for flex items to align tightly to the items above them?
  3. Instead of using prefixes I want to ask site visitors to upgrade their browser
  4. Scrollable div to stick to bottom, when outer div changes in size
  5. Is there a callback on completion of a CSS3 animation?
  6. How to reorder divs using flex box?
  7. Using CSS3 Animations in IE9+
  8. Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x – y), where y is unknown
  9. Center flex item in container, when surrounded by other flex items
  10. Flex items not shrinking when window gets smaller [duplicate]
  11. Trigger CSS Animations in JavaScript
  12. How to window.scrollTo() with a smooth effect
  13. Repeat animation every 3 seconds
  14. Is there any polyfill for current CSS Flexible Box Layout Module as per W3C CR (display: flex etc.)? [closed]
  15. Combination of animation and transition not working properly
  16. How to display an chage photo option on mouse hover similar to linkedin using Javascript? [closed]
  17. How to force browser to show image 3 inches wide?
  18. Cache busting via params
  19. Select all elements that have a specific CSS, using jQuery
  20. How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?
  21. Border Radius for IE8
  22. Have a div cling to top of screen if scrolled down past it [duplicate]
  23. Trees in Twitter Bootstrap [closed]
  24. Limit labels number on Chart.js line chart
  25. Fill available spaces between labels with dots or hyphens
  26. How to set up flexible grid in Vue Material
  27. Multiple read more / read less sections are not working on a page
  28. Google map custom marker with css rounded corner
  29. How can I animate the drawing of text on a web page?
  30. IIS 7.5 no images css js showing

Leave a Comment