隱藏/添加jQuery的元素和轉換其餘的？ （也許用css？）

Question

我不確定這是否可能。 我今天有5個DIV，點擊上面的一個數字後，jQuery將檢查點擊的數量和fadeIn()或​​的數量。

我想要做的是，當箱子四處移動（因爲display: flex和justify-content: space-around），他們有光滑的transition。

我試着用css過渡來做，但沒有奏效。

任何人都可以幫助我嗎？

這裏是的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

我的路 - 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'); 
     } 
    } 
}); 

的[