CSS margin-left 过渡不起作用

Question

我正在尝试从中心向左过渡并降低图像的高度。 高度过渡工作正常，但边距只是传送到左侧而不是动画。

这是我的代码:

#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:

$('#logo_img').addClass('tiny');

工作示例:http://jsfiddle.net/v0w6s3ms/1/

有什么帮助吗？

Answer 1

你不能为 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>