遷移追加OKをjqueryの

Question

によって設定された位置を変えているので、私は​​クラスに遷移プロパティを追加するわけではない場合には、この例では、正常に動作しています。この遷移プロパティを追加すると、jqueryによって設定されたrightプロパティが期待どおりに動作しません。それはあまりにも多くを加算したり減算したりしています。

$(function(){ 
 
    $("#with-transition").click(function() { 
 
    $(document.body).toggleClass("with-transition", this.value); 
 
    }).trigger("click"); 
 
    var curSlide = 0; 
 
    $('.arrow-left').click(function(){ 
 
    
 
    var $slideContainer = $('.slides'); 
 
    var $slide = $slideContainer.find('.slide'); 
 
    
 
    curSlide++; 
 
    if(curSlide === $slide.length){ 
 
    $slide.css({"right":"-=200%"}); 
 
    curSlide = 0; 
 
    } else { 
 
    $slide.css({"right":"+=100%"}); 
 
    } 
 
}); 
 
})

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    background-color: #efefef; 
 
    position: relative; 
 
} 
 

 
.container { 
 
    width: 600px; 
 
    height: 300px; 
 
    background-color: #17A05E; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
      transform: translate(-50%, -50%); 
 
} 
 

 
.slides { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
body.with-transition .slide { 
 
    -webkit-transition: all 400ms ease-in; 
 
    transition: all 400ms ease-in; 
 
} 
 
.slide1, .slide2, .slide3 { 
 
    width: 600px; 
 
    height: 200px; 
 
    position: absolute; 
 
} 
 

 
.slide1 { 
 
    background-color: #DD4E42; 
 
    right: -200%; 
 
} 
 

 
.slide2 { 
 
    background-color: #DF6026; 
 
    right: -100%; 
 
} 
 

 
.slide3 { 
 
    background-color: #F1990D; 
 
    right: 0; 
 
} 
 

 
.nav { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 50%; 
 
    z-index: 1000; 
 
} 
 
.nav .arrow-left, .nav .arrow-right { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: rgba(255, 255, 255, 0.4); 
 
    position: absolute; 
 
    -webkit-transition: all 200ms ease-in-out; 
 
    transition: all 200ms ease-in-out; 
 
} 
 
.nav .arrow-left { 
 
    left: 0; 
 
} 
 
.nav .arrow-right { 
 
    right: 0; 
 
} 
 

 
.arrow-left:hover, .arrow-right:hover { 
 
    background-color: rgba(255, 255, 255, 0.9); 
 
}

<label><input type="checkbox" id="with-transition"> Include transition</label> 
 
<div class="container"> 
 
    <div class="slides"> 
 
    <div class="slide slide1"></div> 
 
    <div class="slide slide2"></div> 
 
    <div class="slide slide3"></div> 
 
    </div> 
 
    <div class="nav"> 
 
    <div class="arrow-left"></div> 
 
    <div class="arrow-right"></div> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

あなたは左下側の軽いオレンジ色のボックスをクリックしたときに遷移が行われます。ここ

コードがあります。違いを確認するには、チェックボックスをオンまたはオフの両方で試してください。チェックボックスをオンにすると、トランジションが含まれるかどうかが決まります。さて、私が欲しいのは、このコードを移行なしで動作させる方法と同じように移行する方法です。

ここで私が検査要素のスナップショットを追加してい：） 1 - 移行

2なし） - 移行

そして最後に、ここでペンがあると：だからCheck it out here as well

Answer 1

この問題をパーセンテージで解決できませんでした。右のプロパティでパーセンテージの代わりにピクセルを使用すると、それは正しく動作します。そうでなければ、右のプロパティにあまりにも多くを追加します。

しかし、私は今の状況に取り組むためにtransform: translate(x,y)プロパティを使用したんでした。

これは意図したとおりに動作し、私が望むように動作します。その位置を基準にして移動する以外に、xPosという新しい変数を作成し、100という値を与え、この変数をmy translate（x）プロパティに使用しました。ここで

は、この新しいバージョンのjQueryのです：

$(function(){ 
    var curSlide = 0; 
    var xPos = 100; 
    $('.arrow-left').click(function(){ 

    var $slideContainer = $('.slides'); 
    var $slide = $slideContainer.find('.slide'); 

    curSlide++; 
    if(curSlide === $slide.length){ 
     $slide.css({'transform':'translate('+(xPos-xPos)+'%, 0)'}); 
     curSlide = 0; 
     xPos = 100; 
    } else { 
     $slide.css({'transform':'translate(-'+xPos+'%, 0)'}); 
     xPos = xPos + 100; 
    } 
}); 
}); 

誰もが知っていれば、私はCSSの遷移に沿って右財産上の割合を使用する場合、再び、この奇怪な行動が発生した理由が、私はもっとだろう知っていて嬉しいです！