CSS3：寬度和邊距同時變化

Question

我有兩個盒子。當點擊一個按鈕時，左邊的框應該變小，右邊的框變大。我的目標是順利過渡。當正確的框變大時，我想要包括一個保證金權利。

我使用CSS3過渡效果。我怎樣才能達到這一點，正確的框寬度和邊距正確的過渡發生同時和正確？

JS小提琴： 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

您需要transitionmargin第一則width

.box-right-bigger { 
    -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: 62%; 
    margin-right: 80px; 
} 

從.box-right-bigger類

Fiddle

Answer 2

使用1平移兩個animatio通過使用all代替2-聲明（一個用於寬度，一個用於容限）NS：

-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; 

在你的情況中，第一過渡聲明（寬度）由用於裕度的過渡重寫...

FIDDLE：http://jsfiddle.net/bmzw80py/11/

Answer 3

不需要觸發兩個不同的轉換：您可能只需通過僅應用一個類來更改左邊框的寬度和左邊距，例如

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; 
} 

---

結果

Answer 4

那麼，你可能會開始轉換一個或兩個屬性，但然後決定添加一些你想要轉換的屬性。因此，如果其他與轉換相關的值相同，那麼從一開始就只需在其中包含「all」關鍵字就容易多了，因此您不必在逗號分隔列表中指定每個屬性。

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

.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: 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%; 
 
} 
 

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

 
.box-right-bigger {    
 
    width: 62%; 
 
    margin-right: 80px; 
 
    -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; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="box-left"></div> 
 
    <div class="box-right"></div> 
 
</div> 
 

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

Here,you find demo 

https://jsfiddle.net/DhwaniSanghvi/mr1feb5f/