web-dev-qa-db-ja.com

CSSのマージンと左のトランジションが機能しない

中央から左へのトランジションを行い、画像の高さを低くしようとしています。高さの遷移は正常に機能していますが、マージンはアニメートする代わりに左にテレポートします。

これは私のコードです：

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

何か助け？

cssmargintransition
14
DarkW

代わりに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>
18
Akshay

「margin-left：auto」から「margin-left：0」に移行します。 Autoは定義された値ではないため、ゼロに減らすことはできません。余白を設定：50％の代わりに「自動」。

5
Pvb

これを試して：

#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

2
Rahul Tripathi

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