CSS margin-left 过渡不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30587900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS margin-left transition not working
提问by DarkW
I'm trying to do a transition from the center to left and reduce the height of an image. The height transition is working fine, but the margin just teleports to the left instead of animating.
我正在尝试从中心向左过渡并降低图像的高度。高度过渡工作正常，但边距只是向左传送而不是动画。
this is my code:
这是我的代码：
#logo_img {
height: 55px;
width: 55px;
background-color: red;
margin-left: auto;
margin-right: auto;
display: block;
transition: all 1s ease-in-out;
}
#logo_img.tiny {
height:45px;
margin-left: 0;
}
JS:
JS：
$('#logo_img').addClass('tiny');
working example: http://jsfiddle.net/v0w6s3ms/1/
工作示例：http: //jsfiddle.net/v0w6s3ms/1/
any help?
有什么帮助吗？
回答by Akshay
You can't animate autoproperty instead try something like this
您不能为auto属性设置动画，而是尝试这样的操作
$(function() {
setTimeout(function() {
$('#logo_img').addClass('tiny');
}, 1000);
});#logo_img {
height: 55px;
width: 55px;
background-color: red;
margin-left: calc(50% - 55px);
margin-right: auto;
display: block;
transition: all 1s ease-in-out;
}
#logo_img.tiny {
height: 45px;
margin-left: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="logo_img"></section>回答by Pvb
You want to transition from "margin-left:auto" to "margin-left:0". Auto is not a defined value, thats why it can't be decreased to zero. Set margin-left: 50% instead "auto".
您想从“margin-left:auto”过渡到“margin-left:0”。Auto 不是一个定义的值，这就是为什么它不能减少到零。设置 margin-left: 50% 而不是“auto”。
回答by Rahul Tripathi
Try this:
尝试这个：
#logo_img {
height: 55px;
width: 55px;
background-color: red;
margin-left: 50%; //Change the auto to 50%
margin-right: auto;
display: block;
transition: all 1s ease-in-out;
}
#logo_img.tiny {
height:45px;
margin-left: 0;
}
回答by Herman
in 2019 you can
2019年你可以
/* replace */
margin-left: auto;
/* with */
margin-left: calc(100% - 55px);
details:
细节：
It is also possible to make it with CSS now. use the property Calc and subtract the width of your element. Thus, the margin will be set specifically and not auto.
现在也可以使用 CSS 来制作它。使用属性 Calc 并减去元素的宽度。因此，边距将是专门设置的，而不是自动设置的。
jQuery(document).ready(function( $ ) {
$('#logo_img').on('click', function() {
$(this).toggleClass('tiny');
}, );
}); //end ready#logo_img {
height: 55px;
width: 55px;
background-color: red;
margin-left: Calc(100% - 55px);
margin-right: auto;
display: block;
transition: all 1s ease-in-out;
}
#logo_img.tiny {
height:45px;
margin-left: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="logo_img" src="https://picsum.photos/100/200" alt="">