使用动画最小化多个 Div

Question

我正在尝试在我的 div .panels 的 width 属性上添加动画。我已经用 transition-property, 和 .animate() 在 css 中尝试过，但它不起作用。 我注意到 calc() 不适用于 jQuery animate...

第三个面板应该总是有其他两个宽度的减法，所以它可以浮动在右边。

ex. width: 'calc(100% - ' + (panelWidth1 + panelWidth2) + 'px)'

所以有什么建议让它发挥作用吗？ 谢谢！

HMTL

<div class="actions">
  <button id="MinPanel1">Minimize Panel 1</button>
  <button id="MinPanel2">Minimize Panel 2</button>
</div>

<div class="panels">
  <div class="panel1"></div>
  <div class="panel2"></div>
  <div class="panel3"></div>
</div>

JS

$( document ).ready(function() {

    $('#MinPanel1').click(function() {
        var toggleWidth = $(".panel1").width() == 225 ? "57px" : "225px";
        $('.panel1').css({
            width: toggleWidth
        });
        adjustPanel();
    });

    $('#MinPanel2').click(function() {
        var toggleWidth = $(".panel2").width() == 330 ? "66px" : "330px";
        $('.panel2').css({
            width: toggleWidth
        });
        adjustPanel();
    });


    adjustPanel = function() {
        var panelWidth1 = $('.panel1').width();
        var panelWidth2 = $('.panel2').width();
        var panelWidthTotal = panelWidth1 + panelWidth2;

        $('.panel3').css({
            width: '-webkit-calc(100% - ' + panelWidthTotal + 'px)',
            width: '-moz-calc(100% - ' + panelWidthTotal + 'px)',
            width: 'calc(100% - ' + panelWidthTotal + 'px)'
        });
    }

});

CSS

[...]

.panel1, .panel2, .panel3{
    height: 100%;
    float: left;
    /*-moz-transition-property: width;
    -o-transition-property: width;
    -webkit-transition-property: width;
    transition-property: width;
    -moz-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;*/
}

[...]

演示：JS FIDDLE

编辑的演示结果：JS FIDDLE

Answer 1

试试这个：

$( document ).ready(function() {

    $('#MinPanel1').click(function() {
        var toggleWidth = $(".panel1").width() == 225 ? "57px" : "225px";
        $('.panel1').animate({
            width: toggleWidth
        },function(){
            adjustPanel($('.panel1').width(), $('.panel2').width())
        });
    });

    $('#MinPanel2').click(function() {
        var toggleWidth = $(".panel2").width() == 330 ? "66px" : "330px";
        $('.panel2').animate({
            width: toggleWidth
        },function(){
            adjustPanel($('.panel1').width(), $('.panel2').width())
        });
    });


    adjustPanel = function(pan1, pan2) {
    console.log($('.panels').width(), pan1, pan2);
        var panelWidthTotal = $('.panels').width() - (pan1 + pan2) + 'px';

        $('.panel3').animate({
            width: panelWidthTotal
        });
    }

});

Answer 2

这是工作代码。它适用于 css 过渡，只是对 js 进行了一点重写，因为代码需要 div 的最终宽度，而不是在动画持续时它会抓取的宽度。

$( document ).ready(function() {
    
    $('#MinPanel1').click(function() {
        var toggleWidth = $(".panel1").width() == 225 ? "57px" : "225px";
        var toggleWidth1=toggleWidth;
        $('.panel1').css({
            width: toggleWidth
        });
        adjustPanel();
    });
    
    $('#MinPanel2').click(function() {
        var toggleWidth = $(".panel2").width() == 330 ? "66px" : "330px";
        var toggleWidth2=toggleWidth;
        $('.panel2').css({
            width: toggleWidth
        });
        adjustPanel();
    });
    
    
    adjustPanel = function() {
        var panelWidth1 = toggleWidth1;
        var panelWidth2 = toggleWidth2;
        var panelWidthTotal = panelWidth1 + panelWidth2;
        
        $('.panel3').css({
            width: '-webkit-calc(100% - ' + panelWidthTotal + 'px)',
            width: '-moz-calc(100% - ' + panelWidthTotal + 'px)',
            width: 'calc(100% - ' + panelWidthTotal + 'px)'
        });
    }
    
});

*{
    box-sizing: border-box;
}
html, body{
    width: 100%;
    height: 100%;
}
.actions{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    width: 100%;
    background: white;
}

.actions button{
    margin-right: 10px;
}

.panels{
    height: 100%;
}
.panel1, .panel2, .panel3{
    height: 100%;
    float: left;
    /*-moz-transition-property: width;
    -o-transition-property: width;
    -webkit-transition-property: width;
    transition-property: width;
    -moz-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;*/
}

.panel1{
    width: 225px;
    background-color: blue;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;

}

.panel2{
    width: 330px;
    background-color: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

.panel3{
    width: calc(100% - 555px);
    background-color: darkgreen;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="actions">
  <button id="MinPanel1">Minimize Panel 1</button>
  <button id="MinPanel2">Minimize Panel 2</button>
</div>

<div class="panels">
  <div class="panel1"></div>
  <div class="panel2"></div>
  <div class="panel3"></div>
</div>