Javascript 当我单击“下一步”按钮时，上一个问题必须通过反向动画删除&；下一个问题必须通过键入效果动画显示

我希望当我点击下一步按钮时，上一个问题必须用反向动画效果移除&下一个问题必须用键入效果动画显示，与下一步点击相同..，下一步点击。。。必须遵循smae步骤。 任何人都可以使用此代码： 我的线圈工作不正常。 请帮我：）先谢谢你

.rks1{
字号：900；
字号：2.5em；
字体系列：rr；
}
.1.信件{
显示：内联块；
线高：1米；
}
.字{
空白：nowrap；
}
.span{
}
1.天空的颜色是。。。？
2.纸张来自。。。？
3.一天有几个小时？



下一个问题
var textWrappers=document.querySelectorAll（'.rks1'）；
textWrappers.forEach（textWrapper=>{
textWrapper.innerHTML=textWrapper.textContent.replace（/（\S*）/g，m=>{
返回`+
m、 替换（/（-）？\S（-））/g，“$&”）+
``;
});
});
var targets=Array.from（document.querySelectorAll（'.rks1.letter'）；
动画时间线({
循环：对，
})
.添加({
目标:目标,，
比例：[3,1]，
斯卡利：[1.5,1]，
不透明度：[0,1]，
翻译Z:0，
放松：“easeOutExpo”，
持续时间：400，
延迟：（el，i）=>60*i
}).添加({
targets:targets.reverse（），
比例：[1,3]，
斯卡利：[1,1.5]，
不透明度：[1,0]，
翻译Z:0，
放松：“easeOutExpo”，
持续时间：100，
延迟：（el，i）=>30*i
}).添加({
不透明度：0，
持续时间：1000，
放松：“easeOutExpo”，
延误：100
})
显示的风险值=[1,0,0]；
风险值问题=['q0'，'q1'，'q2']；
函数next（）{
var qElems=[]；
对于（var i=0；i

您的动画代码实际上只需要以下内容，因为您可以使用animejs的反向时间线功能：

var anim = anime.timeline()
  .add({
    targets: targets,
    scale: [3, 1],
    scaleY: [1.5, 1],
    opacity: [0, 1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 400,
    delay: (el, i) => 60 * i
  })

下面是运行next功能后的反向动画示例。 一旦动画完成，也会使用承诺

function next() {
  anim.reverse();
  anim.complete = () => {
    // next question...
  };     
}

您可以在此回调中继续您的逻辑以加载下一个问题

---

最后的结果，稍微整理一下

var问题=0，
问题=[
“天空的颜色是…？”，
“纸张来自…？”，
“一天有多少小时？”；
var anim，
目标；
函数问题（）{
$（“#问题”）。文本（问题[问题]；
var textWrappers=document.querySelectorAll（“#问题”）；
textWrappers.forEach（textWrapper=>{
textWrapper.innerHTML=textWrapper.textContent.replace（/（\S*）/g，m=>{
返回`+
m、 替换（/（-）？\S（-））/g，“$&”）+
``;
});
});
targets=Array.from（document.querySelectorAll（'#questions.letter'）；
anim=anime.timeline（）
.添加({
目标:目标,，
比例：[3,1]，
斯卡利：[1.5,1]，
不透明度：[0,1]，
翻译Z:0，
放松：“easeOutExpo”，
持续时间：400，
延迟：（el，i）=>60*i
});
}
//初始化
问题（）；
函数next（）{
anim=anime.timeline（）
.添加({
targets:targets.reverse（），
比例：[1,3]，
斯卡利：[1,1.5]，
不透明度：[1,0]，
翻译Z:0，
放松：“easeOutExpo”，
持续时间：100，
延迟：（el，i）=>30*i
});
anim.complete=（）=>{
如果（question==questions.length-1）{question=0；}//重置问题
else{question++；}
问题（）；
};     
}

#问题{
字号：900；
字号：2.5em；
字体系列：rr；
}
#问题，信{
显示：内联块；
线高：1米；
}
.字{
空白：nowrap；
}

下一个问题

答案已更新。问题循环，动画持续时间减少。