Question

我有两个盒子。单击按钮时，左侧框应该变小，右侧框变大。我的目标是顺利过渡。当右框变大时，我想要包含权利。

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

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

结果

Answer 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

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

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

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

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/

CSS3：宽度和边距同时转换

4 个答案: