【问题标题】：CSS margin-left transition not workingCSS margin-left 过渡不起作用
【发布时间】：2015-08-15 18:18:18
【问题描述】：

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

这是我的代码：

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

有什么帮助吗？

【问题讨论】：

标签： css margin transition

【解决方案1】：

对于内容大小不固定的人：

这也可以通过在状态flex: none; 和flex: auto; 之间使用动画来实现。但是您需要在内容周围有一个包装器，并且动画将应用于包装器，而不是“自动”边距。

$('.content').click(function(e) {
  $(e.target).closest('.wrapper').toggleClass('move');
});

.container {
  display: flex;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #D8E0BB;
  position: relative;
}

.wrapper {
  flex: none;
  transition: flex 1s ease;
  display: flex;
  position: relative;
  background: #B6CEC7;
}

.wrapper.move {
  flex: auto;
}

.wrapper.content-align-left {
  margin-left: auto;
}

.wrapper.content-align-ends {
  margin: auto;
}

.content {
  padding: 1rem;
  text-align: center;
  background: #86A3C3;
  color: #6B3074;
}

.content-align-right .content {
  margin-left: auto;
}

.content-align-left .content {
  margin-right: auto;
}

.content-align-center .content {
  margin: auto;
}

.content-align-ends .content:first-child {
  margin-right: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  Look for <b>"key property"</b> comment in the css for the important style to make the animation to work.
  <br><br>
</div>

<div class="container">
  <div class="wrapper content-align-right">
    <div class="content">
      Click Me <br> align right <br> ---------------------
    </div>
  </div>
</div>

<div class="container">
  <div class="wrapper content-align-left">
    <div class="content">
      Click Me <br> align left <br> ------
    </div>
  </div>
</div>

<div class="container">
  <div class="wrapper content-align-center">
    <div class="content">
      Click Me <br> align center <br> ---------------
    </div>
  </div>
</div>

<div class="container">
  <div class="wrapper content-align-ends">
    <div class="content">
      Click Me <br> align ends <br> ----------------------
    </div>
    <div class="content">
      Click Me <br> align ends <br> ------
    </div>
  </div>
</div>

其他可能性：

没有包装器：在transform: translate(50%, 0); margin-right: 100%; 和transform: translate(50%, 0); margin-right: 50%; 之间切换，但如果您有 2 个或更多灵活大小的元素要制作动画，它会变得复杂。
使用包装器：在min-width: 0; 和min-width: 100%; 之间切换，但动画可能看起来不那么流畅，因为动画的开始/结束阶段可能会因为元素本身具有宽度而被剪切。

【讨论】：

【解决方案2】：

2019 年你可以

/* replace */
margin-left: auto; 
/* with */
margin-left: calc(100% - 55px);

详情：

现在也可以用 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="">

【讨论】：

感谢您的示例。是否可以让您的 CSS 解决方案在 Edge 中运行？

【解决方案3】：

试试这个：

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

JSFIDDLE DEMO

【讨论】：

【解决方案4】：

您想从“margin-left:auto”过渡到“margin-left:0”。 Auto 不是一个定义的值，这就是为什么它不能减少到零。设置 margin-left: 50% 而不是“auto”。

【讨论】：

【解决方案5】：

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

【讨论】：