如何在没有＆＃34;闪烁的情况下使用CSS动画向上/向下移动div /＃34;方向之间？

Question

我试图根据点击次数上下移动这些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;
  }
}

Answer 1

只使用transition您不需要使用关键帧

来实现动画效果

这就是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;
    transition:all linear 800ms;
}

#page2{

    background-color: blue;
}

#page1.leave,#page2.enter
{
    transform: translate(0em,-100%);
    -webkit-transform: translate(0em,-100%);
    -moz-transform: translate(0em,-100%);
}



#page1.enter,#page2.leave
{
    transform: translate(0em,-0%);
    -webkit-transform: translate(0em,-0%);
    -moz-transform: translate(0em,-0%);
}

See demo here

Answer 2

在translate(0em,-100%)中再添加一个转换#page2.leave以删除闪烁

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

*
{
  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;
      transform: translate(0em,-100%);
        -webkit-transform: translate(0em,-100%);
        -moz-transform: translate(0em,-100%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;