Html CSS3：宽度和边距同时过渡

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

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

JS小提琴：

我的代码：

HTML:

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

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

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

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

JS:

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

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

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

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

---

您需要

过渡

边距

然后

宽度

.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右键开始增大

类

---

使用

all

对两个动画使用1个翻译，而不是2个声明（一个用于宽度，一个用于边距）：

在您的情况下，第一个转换声明（宽度）被边距的转换覆盖

---

FIDDLE:

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

---

CSS（全部）

---

结果

---

好吧，您可以先转换一个或两个属性，然后决定添加一些您想要转换的其他属性。因此，如果其他与转换相关的值相同，那么从一开始就在其中包含“all”关键字会容易得多，因此您不必在逗号分隔的列表中指定每个属性

$（“#动画”）。单击（函数（）{
$（'.box left'）.addClass（'box-left-small'）；
$（'.box right'）.addClass（'box-right-biger'）；
});
.container{
宽度：100%；
高度：200px；
填充：40px 0 60px；
}
.左框{
浮动：左；
宽度：60%；
高度：100px；
背景：蓝色；
}
.盒子左小一点{
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
过渡：所有1都易于输入输出；
宽度：30%；
}
.右框{
浮动：对；
宽度：30%；
高度：100px；
背景：橙色；
}
.box右大{
宽度：62%；
右边距：80px；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
过渡：所有1都易于输入输出；
}

设置动画
它们已经同时发生了。您必须更好地定义“正确”的含义。我希望宽度和右边距的过渡平滑而缓慢地显示。如果我删除.box right更大类中的边距部分，宽度转换将按需要进行。但是我如何才能做到这一点呢？此外，右边距的设置是平稳的，而不是突然的？@max请参见下面我的方法，以获得一个小的改进Tah-您看到的抖动是因为您还将div的
float
更改为
right
，而这不是由转换来管理的，这是非此即彼，但我也希望能顺利地包括保证金。如何在那里实现过渡效果？在你的小提琴中，右边的空白突然出现。我看不出有什么区别。右框的右边边距没有平滑或缓慢的过程。但它对我有效。你可以使用
all
作为@Miam84回答你。