CSS3 Div動畫相對間距

最近我問了一個類似的問題關於過渡動畫divs。（See this post）CSS3 Div動畫相對間距

下面的代碼片段顯示了我的解決方案。
但是，僅當寬度以像素爲單位給出時，動畫才起作用，而不是以百分比。
有沒有人知道解決這個問題的方法？

EDIT（更多信息澄清我的問題）：

在網站的這一部分，我有一個標題，應始終保持不變，3頁的用戶輸入可以「刷卡」的內容。
因此，頁面左邊距的範圍從-100％到+ 100％不等。

我想要一個滑動動畫，以便用戶可以從第2頁（即顯示圖像）切換到第3頁（即與圖像相關的文本）。

由於不同的瀏覽器窗口大小，我需要寬度爲百分比。可悲的是...

$(document).ready(function() { 
 
    $(".next").click(function() { 
 
    var current = $(".container").css("left"); 
 
    if (current == "-200px") { 
 
     current = "-400px"; 
 
    } else if (current == "0px") { 
 
     current = "-200px"; 
 
    } 
 
    $(".container").css("left", current); 
 
    }); 
 
    $(".prev").click(function() { 
 
    var current = $(".container").css("left"); 
 
    if (current == "-200px") { 
 
     current = "0px"; 
 
    } else if (current == "-400px") { 
 
     current = "-200px"; 
 
    } 
 
    $(".container").css("left", current); 
 
    }); 
 
});

.row { 
 
    border: 1px solid black; 
 
    height: 200px; 
 
    margin: 0; 
 
    width: 200px; 
 
    padding: 0; 
 
    display: block; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.container { 
 
    height: 200px; 
 
    margin: 0; 
 
    width: 600px; 
 
    padding: 0; 
 
    display: block; 
 
    position: absolute; 
 
    left: -200px; 
 
    top: 0; 
 
    -webkit-transition: left 0.5s ease-in-out; 
 
    -moz-transition: left 0.5s ease-in-out; 
 
    transition: left 0.5s ease-in-out; 
 
} 
 
.ins { 
 
    width: 200px; 
 
    float: left; 
 
    height: 200px; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: red; 
 
} 
 
.div1 { 
 
    background-color: red; 
 
} 
 
.div2 { 
 
    background-color: green; 
 
} 
 
.div3 { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.--> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title>TITLE</title> 
 
    <meta name="Title" content="Main"> 
 
</head> 
 

 
<body> 
 

 
    <div class="row"> 
 
    <div class="container"> 
 
     <div class="ins div1">div-1</div> 
 
     <div class="ins div2">div-2</div> 
 
     <div class="ins div3">div-3</div> 
 
    </div> 
 
    </div> 
 
    <button class="prev">prev</button> 
 
    <button class="next">next</button> 
 

 

 
</body> 
 

 
</html>

來源

2017-01-01 Narusan

應該用「px」單位代替哪些百分比值？ – guest271314

100％（我希望它填充整個瀏覽器窗口）的寬度和80％左右的高度。 – Narusan

我已經改變了左側定位上的各個元素的變換：

現在也，類行被設置佔據整個瀏覽器的寬度。容器類是300％（因爲它會爲3個元素留出空間）。而這些孩子的比例是33％，最後是100％。

var pos = 2; /* values 1 - 2 or 3 */ 
 

 
$(document).ready(function() { 
 
    $(".next").click(function() { 
 
    if (pos == 1) { 
 
     $(".container").removeClass("pos1"); 
 
     $(".container").addClass("pos2"); 
 
     pos++; 
 
    } else if (pos == 2) { 
 
     $(".container").removeClass("pos2"); 
 
     $(".container").addClass("pos3"); 
 
     pos++; 
 
    } 
 
    }); 
 
    $(".prev").click(function() { 
 
    if (pos == 3) { 
 
     $(".container").removeClass("pos3"); 
 
     $(".container").addClass("pos2"); 
 
     pos--; 
 
    } else if (pos == 2) { 
 
     $(".container").removeClass("pos2"); 
 
     $(".container").addClass("pos1"); 
 
     pos--; 
 
    } 
 
    }); 
 
});

.row { 
 
    border: 1px solid black; 
 
    height: 200px; 
 
    margin: 0; 
 
    width: 100%; 
 
    padding: 0; 
 
    display: block; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.container { 
 
    height: 200px; 
 
    width: 300%; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.ins { 
 
    width: 33.33%; 
 
    height: 200px; 
 
    margin: 0; 
 
    padding: 0; 
 
    float: left; 
 
    transition: transform 0.5s ease-in-out; 
 
} 
 
.div1 { 
 
    background-color: red; 
 
} 
 
.div2 { 
 
    background-color: green; 
 
} 
 
.div3 { 
 
    background-color: blue; 
 
} 
 

 
.pos2 .ins { 
 
transform: translateX(-100%); 
 
} 
 
.pos3 .ins { 
 
transform: translateX(-200%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.--> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title>TITLE</title> 
 
    <meta name="Title" content="Main"> 
 
</head> 
 

 
<body> 
 

 
    <div class="row"> 
 
    <div class="container pos2"> 
 
     <div class="ins div1">div-1</div> 
 
     <div class="ins div2">div-2</div> 
 
     <div class="ins div3">div-3</div> 
 
    </div> 
 
    </div> 
 
    <button class="prev">prev</button> 
 
    <button class="next">next</button> 
 

 

 
</body> 
 

 
</html>

來源

2017-01-01 19:56:33 vals

這不完全是我正在尋找的東西（至少我看不到一種方式使其按照編輯中描述的方式工作）。但非常感謝您幫助我！我用更多的信息編輯了我的問題，以便我的問題和目標變得更加清晰。 – Narusan

我改變了一些寬度。幸運的是，大部分佈局可以保持不變。 – vals

非常感謝。 – Narusan

Narusan，

如果我正確理解你的目標，問題的一部分是，無論什麼時候，jQuery的想要回到PX單位給你。您可以設置百分比值，但似乎不會將這些百分比返回給您。

我改變你的代碼中，以證明這一點：

$(document).ready(function() { 
 
    $(".next").click(function() { 
 
    var current = $(".container").css("left"); 
 
    console.log(current); 
 
    if (current == "-200px" || current == "-100%") { 
 
     current = "-200%"; 
 
    } else if (current == "0%") { 
 
     current = "-100%"; 
 
    } 
 
    $(".container").css("left", current); 
 
    }); 
 
    $(".prev").click(function() { 
 
    var current = $(".container").css("left"); 
 
    console.log(current); 
 

 
    if (current == "-200px" || current == "-100%") { 
 
     current = "0%"; 
 
    } else if (current == "-200%") { 
 
     current = "-100%"; 
 
    } 
 
    $(".container").css("left", current); 
 
    }); 
 
});

您將看到打印到控制檯的值總是以像素，但如果你檢查你DOM」會看到元素上正在設置％值。

接近這個問題的方式非常不同，就像vals那樣，似乎是一種很好的方法。

來源

2017-01-01 20:02:15 David

對不起，我不得不更清楚地陳述我的目標。我編輯了我的問題，我希望現在更容易理解。感謝您的幫助！ – Narusan

CSS3 Div動畫相對間距

回答

相關問題