Question

我有一个简单的div元素，我使用CSS动画来创建平滑的布局：

div{
-webkit-transition: all 1s ease-in-out;
    -ms-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/yBJ42/1/来动画元素非常简单当元素位于margin:0 auto的中心时失败有没有办法解决这个问题？不幸的是，我不能使用绝对定位元素，因为我的布局中的主要容器使用CSS calc来计算它的宽度，我想保持margin-right:0作为侧边栏显示。

此外，使用JavaScript计算和调整容器宽度和边距并不是我处理这种情况的首选方法。

提前致谢。

Answer 1

这是您想要的jQuery版本： DEMO

var centerMargin=($(window).width()/2)-($('div').width()/2)+'px';
$('div').css('margin-left',centerMargin);
var toggled=false;
$(".animate").click(function(){
    if(!toggled){
        $('div').animate({marginLeft:'0px'},1000);
        toggled=true;
        }
    else{
        $('div').animate({marginLeft:centerMargin},1000);
        toggled=false;
    }
});

Answer 2

应用CSS转换怎么样？您可以使用transform: translateX在X轴上移动元素，而不会影响margin: 0 auto

例如，将元素100％移动到当前位置的左侧。（100％等于变换元素的宽度）

-ms-transform: translateX(-100%)
-webkit-transform: translateX(-100%)
-moz-transform: translateX(-100%)
transform: translateX(-100%)

Answer 3

很遗憾，您无法为2个非数字值之间的属性设置动画。

Answer 4

您无法对自动，继承等属性执行此操作。您需要以px，百分比等设置显式值。

Answer 5

转换建议是一个可靠的解决方案（参见Mike Vranchx的回答）。

但是，如果你绝对必须使用margin：auto，那么设置它的唯一方法就是使用嵌套div。外部div处理居中，而动画则在内部div处理。

<div style="margin: 0 auto; position: relative;">
    <div>Content</div>
</div>

来自边距的动画元素：auto。

5 个答案: