web-dev-qa-db-fra.com

La transition CSS marge-gauche ne fonctionne pas

J'essaie de faire une transition du centre vers la gauche et de réduire la hauteur d'une image. La transition de hauteur fonctionne correctement, mais la marge se téléporte juste vers la gauche au lieu de s'animer.

voici mon code:

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

exemple de travail: http://jsfiddle.net/v0w6s3ms/1/

de l'aide?

cssmargintransition
14
DarkW

Vous ne pouvez pas animer la propriété auto à la place, essayez quelque chose comme ça

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

Vous souhaitez passer de "margin-left: auto" à "margin-left: 0". Auto n'est pas une valeur définie, c'est pourquoi elle ne peut pas être réduite à zéro. Définir la marge gauche: 50% au lieu de "auto".

5
Pvb

Essaye ça:

#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

en 2019, vous pouvez

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

détails:

Il est également possible de le faire avec CSS maintenant. utilisez la propriété Calc et soustrayez la largeur de votre élément. Ainsi, la marge sera définie spécifiquement et non automatiquement.

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