CSS轉換持續時間不適用於第一個轉換效果實例

Question

我正試圖創建一系列按下按鈕觸發的滑動div。 這個想法是每個div都有一個縮略圖和一些與之相關的文本。 點擊左/右按鈕后，div將相應地移動它們的位置。

我的代碼可以在下面的jsfiddle中看到。 我遇到了3個問題：

1）“transition：left 2s”規則不適用於第一個過渡效果，它適用於后續效果。

2）我想重復按下相應的按鈕再次應用左屬性值，這樣我就可以重復滑動div。

3）我沒有將“右”按鈕重新定位回“0”，而是將“左”屬性重新定位為0，我想將其向前移動，使其與前一個左側屬性值相反。

基本上我正在嘗試重新創建這一側的滑塊。

http://www.euphoriumbakery.com/

任何幫助或輸入將不勝感激。

非常感謝您的幫助。

https://jsfiddle.net/kshatriiya/g709swLg/1/

 window.onload = function() { $("#left").on("click", function() { $("#view").css("left", "-262px"); }); $("#right").on("click", function() { $("#view").css("left", "0px"); }); } 

 #galwrapper { width: 650px; height: 400px; display: block; overflow: hidden; } #view { position: relative; width: 1423px; transition: left 2s; } .col-md { display: inline-block; margin-top: 100px; width: 18%; } .thumb img { opacity: 0.9; height: auto; width: auto; max-height: 150px; max-width: 150px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="galwrapper"> <div id="view"> <div class="col-md"> <div class="thumb"> <img class="img-rounded" src="http://netdna.walyou.netdna-cdn.com/wp-content/uploads/2010/09/retrocake1.jpg"> <div class="caption"> <h4>Retro Cake</h4> </div> </div> </div> <div class="col-md"> <a href="#" class="thumb active"> <img class="img-rounded" src="https://i.ytimg.com/vi/dh8ii5sbvyc/maxresdefault.jpg"> <div class="caption"> <h4>Strawberry Cake</h4> </div> </a> </div> <div class="col-md" id="mid"> <a href="#" class="thumb"> <img src="https://i.ytimg.com/vi/dh8ii5sbvyc/maxresdefault.jpg"> <div class="caption"> <h4>Retro Cake</h4> </div> </a> </div> 

Answer 1

#view {
 position: relative;
 width: 1423px;
 left:0;
 transition: left 2s;
}

最初left:0; 用id視圖的div https://jsfiddle.net/81tqeof4/6/

並且對於滑動效果獲取當前左側位置並更新position.check小提琴以獲取示例

$("#left").on("click", function(){

    var leftPosition =  parseInt($("#view").position().left) - 256; 

     $("#view").css("left", -Math.abs(leftPosition));

 });

Answer 2

transition僅適用於現有屬性

因此，最初（在您的CSS中）您的#view沒有可用的left屬性。 只有在點擊后，您的JavaScript才會添加left並且您的轉換開始工作。

所以基本上你需要在JavaScript生效之前將left屬性設置為CSS中的值，然后添加left屬性

#view {
  position: relative;
  width: 1423px;
  left: 0; //initiate
  transition: left 2s;
}