Javascript 在表单中单击“下一步”时如何添加幻灯片效果？ 请从下面的链接中考虑W3Chans:

表单非常基本。我将它用作模板，以便以后可以根据自己的喜好进行编辑

如您所见，单击“下一步”时没有效果。我想在这里添加一个过渡（幻灯片效果），但我不知道如何添加，在哪里添加，以及添加什么代码

---

根据网站上的代码，您能告诉我当我单击“下一步”和“上一步”时，我应该添加什么以产生幻灯片效果吗？

您可以使用animate.css库。

以下内容添加到

.tab{}

  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;

现场示例：

var currentTab=0；//当前选项卡设置为第一个选项卡（0）
显示选项卡（当前选项卡）；//显示当前选项卡
功能显示选项卡（n）{
//此函数将显示表单的指定选项卡。。。
var x=document.getElementsByClassName（“选项卡”）；
x[n].style.display=“块”；
//…并修复上一个/下一个按钮：
如果（n==0）{
document.getElementById（“prevBtn”）.style.display=“无”；
}否则{
document.getElementById（“prevBtn”）.style.display=“inline”；
}
如果（n==（x.length-1））{
document.getElementById（“nextBtn”）.innerHTML=“提交”；
}否则{
document.getElementById（“nextBtn”）.innerHTML=“Next”；
}
//…并运行显示正确步骤指示器的功能：
固定步进指示器（n）
}
函数nextPrev（n）{
//此函数将确定要显示的选项卡
var x=document.getElementsByClassName（“选项卡”）；
//如果当前选项卡中的任何字段无效，请退出该功能：
如果（n==1&&！validateForm（））返回false；
//隐藏当前选项卡：
x[currentTab].style.display=“无”；
//将当前选项卡增加或减少1：
currentTab=currentTab+n；
//如果您已到达表单的末尾…：
如果（currentTab>=x.length）{
//…表格将在以下时间提交：
document.getElementById（“regForm”）.submit（）；
返回false；
}
//否则，显示正确的选项卡：
显示选项卡（当前选项卡）；
}
函数validateForm（）{
//此函数用于验证表单字段
变量x，y，i，valid=true；
x=document.getElementsByClassName（“选项卡”）；
y=x[currentTab].getElementsByTagName（“输入”）；
//检查当前选项卡中每个输入字段的循环：
对于（i=0；i

/*为表单设置样式*/
#正则表达式{
背景色：#ffffff；
保证金：100像素自动；
填充：40px；
宽度：70%；
最小宽度：300px；
}
/*设置输入字段的样式*/
输入{
填充：10px；
宽度：100%；
字号：17px；
字体系列：雷威；
边框：1px实心#AAAAA；
}
/*标记在验证时出错的输入框：*/
输入无效{
背景色：#ffdddd；
}
/*默认情况下隐藏所有步骤：*/
.标签{
显示：无；
-webkit动画名称：fadeInUp；
动画名称：法德努普；
-webkit动画持续时间：500ms；
动画持续时间：500ms；
}
/*制作圆圈，指示表格的步骤：*/
.步骤{
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbbbbb；
边界：无；
边界半径：50%；
显示：内联块；
不透明度：0.5；
}
/*标记活动步骤：*/
.step.active{
不透明度：1；
}
/*标记已完成且有效的步骤：*/
.一步完成{
背景色：#4CAF50；
}
@字符集“UTF-8”；
/*!
*动画-http://daneden.me/animate
*版本-3.7.0
*根据麻省理工学院许可证获得许可-http://opensource.org/licenses/MIT
*
*版权所有（c）2018丹尼尔·伊登
*/
@-webkit关键帧fadeInUp{
从{
不透明度：0；
-webkit转换：translate3d（0,100%，0）；
转换：translate3d（0,100%，0）；
}
到{
不透明度：1；
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
}
@关键帧淡入淡出{
从{
不透明度：0；
-webkit转换：translate3d（0,100%，0）；
转换：translate3d（0,100%，0）；
}
到{
不透明度：1；
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
}
法代努普先生{
-webkit动画名称：fadeInUp；
动画名称：法德努普；
}

登记册：
姓名：


联系方式：


生日：



登录信息：


以前的
下一个

实际上，你应该尝试几次，然后在遇到问题时询问，并展示你的代码。。。要开始创建表单的每个“页面”都是一个带有class=“tab”的div，在更改页面/选项卡的onClick处理程序中，您可以向div.tab添加一个css类来设置不透明度的动画，或者如果希望它滑动动画转换：translateY（），我仅在片段中使用“fadeInUp”效果。访问所有影响的链接。嘿@BOZ我正在尝试，但它会在按下任何按钮之前设置第一个选项卡的动画。你知道怎么修吗？