CSS3：宽度和边距同时过渡答案

【问题标题】：CSS3: Width and margin transition simultaneouslyCSS3：宽度和边距同时过渡
【发布时间】：2015-10-13 17:28:47
【问题描述】：

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

我使用 CSS3 过渡效果。我怎样才能实现右框的宽度和边距右过渡同时正确地发生？

我的代码：

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

【问题讨论】：

它们已经同时发生了。您必须更好地定义“正确”的含义。
我希望宽度和边距右过渡都能平滑而缓慢地出现。如果我删除 .box-right-bigger 类中的边距部分，宽度转换会根据需要发生。但是，除了边距正确设置平滑而不突然，我该如何实现呢？
@max 另请参阅下面我的方法，以进行小幅改进
啊 - 您看到的抖动是因为您还将 div 的 float 更改为 right，这不是由转换管理的，它是非此即彼的。

标签： html css

【解决方案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;  
}

结果

【讨论】：

【解决方案2】：

您首先需要transition margin 然后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

【讨论】：

但我也希望能顺利地包含边距权。我怎样才能在那里实现过渡效果？在您的小提琴中，右边距突然发生。
我看不出有什么不同。右框的边距没有平滑或缓慢的过程。
但它对我有用，您可以将all 用于animation
作为@Miam84 回答你。

【解决方案3】：

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

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

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

小提琴：http://jsfiddle.net/bmzw80py/11/

【讨论】：

【解决方案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/

【讨论】：