transition marge-gauche non animée

Question

Je souhaite faire glisser un élément en manipulant la marge de gauche.

Je l'ai fonctionné en utilisant jQuery animate() mais je veux améliorer les performances en utilisant les transitions CSS. J'utilise jQuery pour ajouter une nouvelle classe à l'élément que je veux faire glisser mais il n'anime pas - il déplace l'élément instantanément.

Voici un JS Fiddle montrant le problème.

Si vous cliquez sur le bouton "animer gauche", il utilise jQuery animate() et fonctionne comme prévu.

Si vous cliquez sur le bouton 'transition left', il ajoute la classe 'slide' à l'élément mais ne fonctionne pas comme prévu.

J'ai essayé de changer les marges de l'auto à un pourcentage fixe, mais cela n'a pas aidé du tout. Il est intéressant de noter que si vous appuyez sur F12 et modifiez manuellement la propriété margin-left de la classe 'slide' de -100% à -50%, elle s'anime!

Des idées pour lesquelles cela ne fonctionne pas?

Answer 1

Vous avez seulement besoin d'ajouter la classe de diapositive au conteneur, donc pas besoin de tout ce qui était dans l'événement click.

$('.transition').on('click',function() { 
    var container = $('.container'); 
    container.addClass('slide'); 
}); 

De même, préférez utiliser la transformation translate au lieu de margin. Ils sont plus performants pour les animations:

.slide { 
    transform: translate(-100%, 0); 
    transition: transform 1s linear; 
} 

Avec ces changements, la gauche «diapositives div: https://jsfiddle.net/d30oewxz/5/

Answer 2

Le problème est avec la façon dont vous créez de nouveaux éléments DOM. Notez que la classe .slide n'a pas été ajoutée à la classe.

Aussi, je suggère d'éviter d'avoir plusieurs éléments avec le même id, comme plusieurs <div id="content"> votre jquery générer.

Answer 3

Le problème que vous avez eu était que marge-gauche avait une valeur de auto. Vous ne pouvez pas animer à partir d'une valeur automatique. Donc je l'ai remplacé par 0px.

J'ai également supprimé les modifications apportées au code HTML par jQuery. Surtout le .wrap() semble causer des problèmes supplémentaires.

JS-Fiddle

JS-Fiddle: https://jsfiddle.net/d30oewxz/6/

html

<div class="main-content"> 
    <div class="container"> 
    <div id="content"> 
    THIS IS SLIDE 1 
    </div> 
    </div> 
</div> 

css

.content-wrapper { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
    white-space: nowrap; 
} 
.content-wrapper > * { 
    display: inline-block; 
    vertical-align: top; 
} 
.container { 
    position: relative; 
    white-space: normal; 
    width: 400px; 
    margin-left: 0px; 
    margin-right: auto; 
    padding-left: 15px; 
    padding-right: 15px; 
    border: 1px solid #000; 
    text-align: center; 
    -webkit-transition: margin-left 1s linear; 
    -khtml-transition: margin-left 1s linear; 
    -moz-transition: margin-left 1s linear; 
    -ms-transition: margin-left 1s linear; 
    transition: margin-left 1s linear; 
} 
.button { 
    margin-top:50px; 
} 
.slide { 
    margin-left: -100%; 
} 

JS/jQuery

$('.transition').on('click',function() { 
    var container = $('.container'); 
    //removed this part of the code 
    $('.container').addClass('slide'); 
}); 

$('.animate').on('click',function() { 
    var container = $('.container'); 
    container.wrap('<div class="content-wrapper" style="width: ' + container.outerWidth() + 'px;"></div>'); 
    var direction = {marginLeft: '-=100%'}; 
    $('.container').parent().append('<div class="container"><div id="content">THIS SLIDE ANIMATES WITH JQUERY</div></div>'); 
    container.animate(direction, 1000, function() { 
    }); 
});