CSS3: одновременное изменение ширины и края

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

Вам нужно 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 декларации (один для ширины, один для края):

-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

Ну, вы можете начать переход одного или двух свойств, но затем принять решение добавить некоторые другие, которые вы хотите перевести. Таким образом, если другие значения, связанные с переходом, одинаковы, тогда было бы намного проще иметь ключевое слово «все» там с самого начала, поэтому вам не нужно указывать каждое свойство в списке, разделенном запятыми.

$('#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/