Hiding / Adding an element with jquery and transitioning the rest? (maybe css?)

Question

I am not sure if this is possible. Today I have 5 DIV, and after clicking on it, the jQuery number will check the number of clicked and fadeIn()or the fadeOut()number of fields.

What I want to do is that when the boxes move (due to display: flexand justify-content: space-around), they have a smooth transition.

I tried to do this with a css transition, but it did not work.

Can anybody help me?

Here is the JSFiddle: https://jsfiddle.net/0k1xj3d5/1/

HTML:

<div class="wrapper">
    <div class="num" rel="1">1</div>
    <div class="num" rel="2">2</div>
    <div class="num" rel="3">3</div>
    <div class="num" rel="4">4</div>
    <div class="num" rel="5">5</div>
</div>

<div class="wrapper">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
    <div class="box-4"></div>
    <div class="box-5"></div>
</div>

CSS

.wrapper {
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
}

[class^=box] {
    width: 50px;
    height: 50px;
    background-color: blue;
}

.num {
    width: 50px;
    height: 50px;
    background-color: green;
}

JQuery

$('.num').on('click', function(){
    var quant = $(this).attr('rel');

    for(var i=1; i<=5 ;i++){
      if(i <= quant){
        if(!$('.box-' + i).is(':visible')){
          $('.box-' + i).fadeIn();
        } 
      } else {
        $('.box-' + i).fadeOut();
      }
    }
});

Answer 1

My path is https://jsfiddle.net/sergdenisov/qgyeay0v/10/ :

HTML:

<div class="wrapper">
    <div class="num" rel="1">1</div>
    <div class="num" rel="2">2</div>
    <div class="num" rel="3">3</div>
    <div class="num" rel="4">4</div>
    <div class="num" rel="5">5</div>
</div>

<div class="wrapper">
    <div class="wrapper__item wrapper__item_shown">
        <div class="box"></div>
    </div>
    <div class="wrapper__item wrapper__item_shown">
        <div class="box"></div>
    </div>
    <div class="wrapper__item wrapper__item_shown">
        <div class="box"></div>
    </div>
    <div class="wrapper__item wrapper__item_shown">
        <div class="box"></div>
    </div>
    <div class="wrapper__item wrapper__item_shown">
        <div class="box"></div>
    </div>
</div>

CSS

.wrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    margin-bottom: 50px;
}

.wrapper__item {
    -webkit-flex: 0.00001;
    flex: 0.00001;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all 1s;
    transition: all 1s;
}

.wrapper__item_shown {
    -webkit-flex: 1;
    flex: 1;
}

.box {
    width: 50px;
    height: 50px;
    background-color: blue;
    margin: 0 auto;
}

.num {
    width: 50px;
    height: 50px;
    background-color: green;
}

JS:

$('.num').on('click', function(){
    var quant = $(this).attr('rel');
    var $wrapperItems = $('.wrapper__item');

    for (var i = 1; i <= 5; i++) {
        var $wrapperItem = $wrapperItems.eq(i - 1);

        if (i <= quant) {
            $wrapperItem.addClass('wrapper__item_shown');
        } else {
            $wrapperItem.removeClass('wrapper__item_shown');
        }
    }
});