在2019年您可以

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属性设置动画，而是尝试使用此类

＆＃13;

$(function() {
  setTimeout(function() {
    $('#logo_img').addClass('tiny');
  }, 1000);
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="logo_img"></section>

＆＃13;

Answer 2

你想从＆＃34; margin-left：auto＆＃34;过渡至＆＃34;保证金左：0＆＃34;。自动不是定义的值，这就是为什么它不能降为零。设置margin-left：50％而不是＃34; auto＆＃34;。

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

对于内容大小不固定的用户：

这也可以通过在状态i和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%;之间切换，但是如果要设置2个或更多灵活尺寸的元素进行动画处理，则会变得很复杂。
使用包装器：在transform: translate(50%, 0); margin-right: 50%;和min-width: 0;之间切换，但是动画可能看起来不那么平滑，因为动画的开始/结束阶段可能会被剪切，因为元素本身具有宽度

CSS margin-left过渡不起作用

5 个答案:

在2019年您可以

详细信息：