How to Animate Flexbox Inserts & Removes

Is it possible to animate position of flex items when items are removed/added?

I don't know much about angularJS, but you could do this:

http://jsfiddle.net/H9mvd/5/

using transitions. To remove an element, first you'd change the width, margins etc. to 0, and then remove the item on the 'transitionEnd' event:

$(this).css({
    'margin-left': '0',
    'margin-right': '0',
    width: '0'
}).on('transitionend', function(){
    $(this).remove();
});

And for adding elements, insert the new element with the style attribute such that width, margins etc. are 0. Then remove these from style so that the element gets transitioned to it's proper size:

container.append('<div style="margin-left:0;margin-right:0;width:0;"></div>');

setTimeout(function(){
    // needs placing in a timeout so that
    // the CSS change will actually transition
    // (CSS changes made right after inserting an
    // element into the DOM won't get transitioned)

    container.children().last().css({
        'margin-left': '',
        'margin-right': '',
        width: ''
    });
},0);

There are 'jumps' in position when adding/removing elements because the flexbox is set with justify-content: space-around;, so adding/removing an element (even one with zero width) will cause the 'space' between elements to be redistributed. I think it'd be fairly tricky to work around this.

How to animate inserts and removes in a container with justify-content?

The main problem is that the behavior you are getting is the expected one.

In the very same instant that card.remove() is executed the flexbox justify-content property need to adjust the gaps around the removed element (as you said). And, as Paulie D has pointed out, there is nothing to animate about.

The only solution I can think about is to skip the flex thing and use javascript to create the necessary gaps among the card elements.

Here I leave the snippet:

var animation_time = 500;

var column_height = $('.column').height();

var cards_height = $('.card').height();

var cards_number;

var cards_total_height;

var space_to_be_distributed;

var placeholder_height;

function updateSizes(cards_number)

{

    cards_total_height = cards_number * cards_height;

    space_to_be_distributed = column_height - cards_total_height;

    placeholder_height = space_to_be_distributed / (cards_number + 1);

}

updateSizes($('.card').length);

$('.placeholder').height(placeholder_height);

$(document).on('click', '.card', function () {

    var card = $(this);

    card.animate({height: 0, opacity: 0}, animation_time, function () {

     card.remove(); 

    });

    updateSizes($('.card').length - 1);

    var placeholder  = card.next();

    $('.placeholder').not(placeholder).animate({height: placeholder_height}, animation_time);

    placeholder.animate({height: 0}, animation_time, function () {

     placeholder.remove();

        updateSizes($('.card').length);

        $('.placeholder').animate({height: placeholder_height}, animation_time);

    });

});

$('a').click(function () {

    var card = $('<div class="card">');

    card.css({opacity: 0, height: 0})

        .appendTo('.column')

        .animate({height: 25, opacity: 1}, animation_time);        

 var placeholder = $('<div class="placeholder">');

    placeholder.css({height: 0})

     .appendTo('.column');

    updateSizes($('.card').length);

    $('.placeholder').animate({height: placeholder_height}, animation_time);

});

body, html, .column {

    height: 100%;

    margin: 0;

}

.column {

    float: left;

    width: 100px;

    background: navy;

    overflow: hidden;

}

.card {   

    height: 25px;

    width: 100px;

    background: grey;

}

.placeholder {   

    height: 25px;

    width: 100px;

}

<html>

<head>

    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

</head>

<body>

<div class="column">

    <div class="placeholder"></div>

    <div class="card"></div>

    <div class="placeholder"></div>

    <div class="card"></div>

    <div class="placeholder"></div>

    <div class="card"></div>

    <div class="placeholder"></div>

</div>

<a href="#">Add card</a>

</body>

</html>

How to Animate Flexbox Inserts & Removes

Is it possible to animate position of flex items when items are removed/added?

How to animate inserts and removes in a container with justify-content?

Related Topics

Leave a reply