-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;
}
}
'animation-fill-mode：backwards;を設定することなく、＃page2.leaveでフリッカー（https://jsfiddle.net/9q0scpa0/2/）を解決したようです –
@ Me.Nameはい、それが実際に何が期待通りに実行されているかテストされています。それを解決する最もクリーンな方法だと私には思われます。 – vals