-1
我想根據點擊向上和向下移動這些div：如何使用CSS動畫向上/向下移動div，而在方向之間沒有「閃爍」？
- 一次點擊移動起來
- 下一頁點擊移動下來（然後重複在下次點擊）
移動它們運作良好，但是當我點擊將它們向下移動時，它們首先閃爍不可見，然後向下移動。我究竟做錯了什麼？
的jsfiddle：https://jsfiddle.net/9q0scpa0/
HTML：
<div class="page" id="page1" onclick="restart()">
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
</div>
<div class="page" id="page2" onclick="restart()">
Page 2
</div>
CSS：
*
{
margin: 0em;
padding: 0em;
}
html
{
height: 100%;
width: 100%;
}
body
{
height: 100%;
width: 100%;
overflow: hidden;
}
.page
{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
background-color: red;
}
@keyframes moveNext
{
0% {
transform: translate(0em,100%);
-webkit-transform: translate(0em,0%);
-moz-transform: translate(0em,0%);
}
100% {
transform: translate(0em,-100%);
-webkit-transform: translate(0em,-100%);
-moz-transform: translate(0em,-100%);
}
}
@keyframes movePrevious
{
0% {
transform: translate(0em,-100%);
-webkit-transform: translate(0em,-100%);
-moz-transform: translate(0em,-100%);
display: block;
}
100% {
transform: translate(0em,0%);
-webkit-transform: translate(0em,0%);
-moz-transform: translate(0em,0%);
}
}
#page1.leave
{
z-index: 0;
animation-name: moveNext;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
animation-duration: 800ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#page2.enter
{
background-color: blue;
z-index: 1;
animation-name: moveNext;
animation-duration: 750ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#page1.enter
{
z-index: 0;
animation-name: movePrevious;
animation-duration: 800ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#page2.leave
{
background-color: blue;
z-index: 1;
animation-name: movePrevious;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
animation-duration: 750ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
的JavaScript：
var isMoveNext = true;
var page1 = document.getElementById("page1");
var page2 = document.getElementById("page2");
window.restart = function()
{
//Moving next
if (isMoveNext)
{
page1.className = "page leave";
page2.className = "page enter";
isMoveNext = false;
}
else
{
page1.className = "page enter";
page2.className = "page leave";
isMoveNext = true;
}
}
沒有看所有的細節，在＃page2.leave中設置'animation-fill-mode：backwards;'似乎解決了閃爍（https://jsfiddle.net/9q0scpa0/2/）沒有測試它是否確實符合預期，但 –
@ Me.Name是的，它認爲它工作正常。在我看來，解決這個問題最簡單。 – vals