html - CSS3 : Width and margin transition simultaneously

Question

我有两个盒子。单击按钮时，左侧框应该变小，右侧框应该变大。我的目标是实现平稳过渡。当右侧框变大时，我希望包含右侧边距。

我使用CSS3过渡效果。如何实现右框宽度和边距右过渡同时正确发生？

JS fiddle : http://jsfiddle.net/bmzw80py/4/

我的代码:

HTML:

<div class="container">   
    <div class="box-left"></div>
    <div class="box-right"></div>
</div>

<button id="animate">Animate</button>

CSS:

.container {
    width: 100%;
    height: 200px;
    padding: 40px 0 0 60px;
}

.box-left {
    float: left;
    width: 60%;
    height: 100px;
    background: blue;
}

.box-left-smaller {
     -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
    width: 355px;
}

.box-right {
    float: right;
    width: 30%;
    height: 100px;
    background: orange;
}

.box-right-bigger {
     -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;

      -webkit-transition: margin 1s ease-in-out;
    -moz-transition: margin 1s ease-in-out;
    -o-transition: margin 1s ease-in-out;
    transition: margin 1s ease-in-out;

    width: 62%;
    margin-right: 80px;
}

JS:

$('#animate').click(function() {
   $('.box-left').addClass('box-left-smaller'); 
   $('.box-right').addClass('box-right-bigger'); 
});

Answer 1

无需触发两种不同的转换:您可以仅通过仅应用一个类来更改左框的宽度和左边距，例如

http://jsfiddle.net/4qwrLtuw/1/

---

CSS (全部)

.container {
    width: 100%;
    height: 200px;
    padding: 40px 0 0 0;
}


.box-right {
    overflow: hidden;
    height: 100px;
    background: orange;
}


.box-left {
    float: left;
    width: 60%;
    margin-right: 2%;
    height: 100px;
    background: blue;
}

.box-left-smaller {
     -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    width: 30%;
    margin-right: 80px;  
}

---

结果