Javascript 如何使用translateY一次显示一个连续的元素？

最后，对于每次单击按钮，我希望显示一个包含新内容的元素。换句话说

• 您可以读取父容器中包含的内容
• 要查看下一项，请单击按钮
• 单击按钮时，旧内容向下移动。新内容从容器顶部向下流动。它暂停以阅读新内容
• 要获取新内容，请再次按下按钮

我不清楚如何实现这一点，也不清楚是否可以使用

CSS

动画。根据我所发布的内容，它只需要将两个元素同时转换为垂直轴。如何重构它，使一个元素暂停并使用

普通JavaScript
显示其内容


var div1=document.querySelector（“.first”）；
var div2=document.querySelector（“.second”）；
var按钮=document.querySelector（“按钮”）；
var divs=[div1，div2]；
按钮。addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
对于（变量i=divs.length-1；i>-1；i--）{
var div=divs[i]；
div.classList.remove（“下移”）；
无效部分偏移网络宽度；
div.classList.add（“下移”）；
}
});
正文{
背景：#222；
}
部分{
宽度：50vw；
高度：300px；
边框：5px纯红；
保证金：50px自动；
溢出：隐藏；
}
.第一，.第二{
宽度：继承；
高度：300px；
背景：红色；
转换：translateY（-300px）；
}
.第二{
背景：粉红色；
}
h1{
保证金：0；
填充顶部：50px；
文本对齐：居中；
}
.下档{
动画：下降1s，放松；
}
@关键帧向下{
从{
变换：translateY（0）；
}
到{
变换：translateY（300px）；
}
}

1.
2.
单击
可以向元素添加包装，并设置包装动画


var wrapper=document.querySelector（“.wrapper”）；
var按钮=document.querySelector（“按钮”）；
按钮。addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
wrapper.style.transform='translateY（-300px）'
});
正文{
背景：#222；
}
部分{
宽度：50vw；
高度：300px；
边框：5px纯红；
保证金：50px自动；
溢出：隐藏；
}
.第一，.第二{
宽度：继承；
高度：300px；
背景：红色；
/*转换：translateY（-300px）*/
}
.第二{
背景：粉红色；
}
.包装纸{
过渡：所有1都放松；
}
h1{
保证金：0；
填充顶部：50px；
文本对齐：居中；
}
.下档{
动画：下降1s，放松；
}
@关键帧向下{
从{
变换：translateY（0）；
}
到{
变换：translateY（300px）；
}
}

1.
2.
单击
你用什么动画淡出，用什么动画淡入？CSS中列出了我仅有的动画。鉴于我从未尝试过这一点，我不确定达到预期结果所需的流量。