CSS margin-left transition nie działa

Question

Próbuję zrobić przejście ze środka w lewo i zmniejszyć wysokość obrazu. Przejście wysokości działa dobrze, ale margines teleportuje się w lewo zamiast animacji.

to mój kod:

#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'); 

przykład praca: http://jsfiddle.net/v0w6s3ms/1/

any help?

Answer 1

Nie można animować auto własność zamiast spróbować coś takiego

$(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

chcesz przejść od "margin-left: auto" na "margin-left: 0". Auto nie jest zdefiniowaną wartością, dlatego nie można jej zmniejszyć do zera. Ustaw margin-left: 50% zamiast "auto".

Answer 3

Spróbuj tego:

#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