余白左のトランジションはアニメーション化されていません

Question

左の余白を操作して要素のスライドを作りたいと思います。

jQuery animate()を使用していますが、CSSトランジションを使用してパフォーマンスを改善したいと考えています。

私はスライドしたい要素に新しいクラスを追加するためにjQueryを使用していますが、アニメーション化されません。要素を瞬時に移動します。

ここには、問題を示すJS Fiddleがあります。

'animate left'というラベルの付いたボタンをクリックすると、jQuery animate()が使用され、期待どおりに機能します。

'transition left'というラベルのボタンをクリックすると、 'slide'クラスが追加されますが、期待どおりに機能しません。

私は、余白をautoからfixed percentageに変更しようとしましたが、それはまったく助けませんでした。

興味深いことに、F12を押して 'slide'クラスのmargin-leftプロパティを-100％から-50％に手動で変更すると、アニメーション化されます。

これはなぜ機能しないのでしょうか？

Answer 1

スライドクラスをコンテナに追加するだけで、クリックイベントにあったものは必要ありません。

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

また、marginの代わりにtranslate transformationを使用することをお勧めします。彼らは、アニメーションのためのよりパフォーマンスだ：これらの変更により

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

は、divの「スライド」左：https://jsfiddle.net/d30oewxz/5/

Answer 2

問題は、新しいDOM要素を作成する方法です。追加されたクラスには​​クラスが添付されていないことに注意してください。

また、同じIDを持つ複数の要素を持つことを避けることをお勧めします。たとえば、複数の<div id="content"> jqueryが生成されます。

Answer 3

問題は、margin-leftにautoという値があることでした。自動値からアニメートすることはできません。だから私はそれを0pxに置き換えました。

また、jQueryによってhtmlに加えられた変更を削除しました。特に.wrap（）は追加の問題を引き起こすようです。

JS-フィドル

JS-フィドル：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() { 
    }); 
});