使用 jquery 隐藏/添加元素并转换其余元素？（也许用css？）答案

【问题标题】：Hiding/Adding element with jquery and transitioning the rest? (maybe with css?)使用 jquery 隐藏/添加元素并转换其余元素？（也许用css？）
【发布时间】：2015-07-21 01:37:48
【问题描述】：

我不确定这是否可能。我今天拥有的是 5 个 DIV，在单击它们上方的数字后，jQuery 将检查单击的数字和 fadeIn() 或 fadeOut() 框的数量。

我想要做的是，当盒子四处移动时（因为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();
      }
    }
});

【问题讨论】：

Is it possible to animate position of flex items when items are removed/added?的可能重复
抱歉，这个其他问题没有完全回答，他们仍然没有找到添加元素和过渡其他元素的方法。
@William 你到底想要什么样的过渡？因为您已经使用 jQuery 进行了渐变过渡。
我想要一个可以将盒子顺利移动到新位置的过渡。就像我有 4 个盒子并希望它是 5 个时，已经存在的四个盒子会平滑地向左移动，所以第 5 个盒子会有足够的空间淡入。还有一些淡出时，比如我有 5 个盒子，然后点击只有 2 个，因此其中 3 个将淡出，另外 2 个将顺利移动到新位置。全部根据新的 flex 位置。

标签： jquery html css transition

【解决方案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');
        }
    }
});

【讨论】：

我之前尝试过使用这种flex: 0.00001; 技术但没有成功。
转场和动画是棘手的事情，每一行代码都很重要=）。