CSS 左边距过渡不起作用

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>

Answer 2

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

Answer 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

Answer 4

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="">

Answer 5

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

这也可以通过在状态 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 个或更多灵活大小的元素要设置动画，它会变得复杂。
With wrapper：在min-width: 0;和min-width: 100%;之间切换，但动画可能看起来不那么流畅，因为动画的start/end阶段可能会被剪切，因为元素本身有宽度。

CSS 左边距过渡不起作用

CSS margin-left transition not working

css

margin

transition

2019年你可以

详情：