Javascript 如何使用CSS动画向上/向下移动div，而不使用；眨眼；在两个方向之间？

我正试图根据点击量上下移动这些分区：

• 初始单击会将其向上移动
• 下一次单击将其向下移动（然后在下一次单击时重复）

将它们向上移动效果很好，但当我单击将它们向下移动时，它们首先闪烁不可见，然后向下移动。我做错了什么

JSFiddle：

HTML:

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

---

只需使用

过渡

即可实现动画，无需使用关键帧

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

---

在

#page2中再添加一个转换
翻译（0em，-100%）
。离开

以删除闪烁

var isMoveNext=true；
var page1=document.getElementById（“page1”）；
var page2=document.getElementById（“page2”）；
window.restart=函数（）
{
//下一步行动
if（isMoveNext）
{
page1.className=“页面离开”；
page2.className=“页面输入”；
isMoveNext=false；
}
其他的
{
page1.className=“页面输入”；
page2.className=“页面离开”；
isMoveNext=true；
}
}

*
{
边距：0em；
填充：0em；
}
html
{
身高：100%；
宽度：100%；
}
身体
{
身高：100%；
宽度：100%；
溢出：隐藏；
}
页
{
位置：相对位置；
身高：100%；
宽度：100%；
溢出：隐藏；
背景色：红色；
}
@关键帧移动下一步
{
0% {
转换：翻译（0em，100%）；
-webkit转换：翻译（0em，0%）；
-moz变换：平移（0em，0%）；
}
100% {
变换：平移（0em，-100%）；
-webkit转换：翻译（0em，-100%）；
-moz变换：平移（0em，-100%）；
}
}
@关键帧移动到上一个
{
0% {
变换：平移（0em，-100%）；
-webkit转换：翻译（0em，-100%）；
-moz变换：平移（0em，-100%）；
显示：块；
}
100% {
变换：平移（0em，0%）；
-webkit转换：翻译（0em，0%）；
-moz变换：平移（0em，0%）；
}
}
#第1页离开
{
z指数：0；
动画名称：moveNext；
-webkit动画延迟：200ms；
动画延迟：200ms；
动画持续时间：800ms；
动画迭代次数：1；
动画计时功能：轻松进出；
动画填充模式：正向；
}
#第2页输入
{
背景颜色：蓝色；
z指数：1；
动画名称：moveNext；
动画持续时间：750ms；
动画迭代次数：1；
动画计时功能：轻松进出；
动画填充模式：正向；
}
#第1页输入
{
z指数：0；
动画名称：movePrevious；
动画持续时间：800ms；
动画迭代次数：1；
动画计时功能：轻松进出；
动画填充模式：正向；
}
#第2页离开
{
背景颜色：蓝色；
z指数：1；
动画名称：movePrevious；
-webkit动画延迟：200ms；
动画延迟：200ms；
动画持续时间：750ms；
动画迭代次数：1；
动画计时功能：轻松进出；
动画填充模式：正向；
变换：平移（0em，-100%）；
-webkit转换：翻译（0em，-100%）；
-moz变换：平移（0em，-100%）；
}

第1页


第1页



第1页



第1页




第1页

第1页


第1页



第1页



第2页

不查看所有细节，设置

动画填充模式：向后在#page2.leave中似乎解决了闪烁问题（）没有测试它是否真的达到预期效果though@Me.Name是的，我想它可以用。在我看来，这是解决这个问题的最干净的方法
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;
  }
}

*
{
  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%);
}