Javascript 如何在触发css动画后显示它？

晚上好，我是一名初级前端开发人员，正在尝试实现Pinterest的草图以供培训。 我在注册/登录页面上找到了这个gif，但我在实现动画方面遇到了一个主要问题，当用户单击注册按钮时，我不知道如何反转动画。有人能告诉我如何反转动画吗

函数动画（）{
var元素=document.getElementById（“containerForm”）
元素。类列表。添加（“幻灯片”）
}

.containerForm{
宽度：50px；高度：50px；背景色：红色；
}
.幻灯片{
动画：滑入滑出；
位置：相对位置；
动画填充模式：正向；
}
@关键帧滑动{
0% {
变换：translateX（0）；
}
100% {
转化：translateX（100%）；
溢出：隐藏；
能见度：可见；
}
}

单击

可以添加另一个css类并使用动画方向属性。 即

函数动画（）{
var元素=document.getElementById（“containerForm”）
元素。类列表。添加（“幻灯片”）
}
函数反向（）{
var元素=document.getElementById（“containerForm”）
元素。类列表。删除（“幻灯片”）
}

.containerForm{
宽度：50px；
高度：50px；
背景色：红色；
变换：translateX（0）；
转变：转变2s；
}
.幻灯片{
转化：translateX（100%）；
}

点击
单击

转换也可以工作：

例如：

*{margin:0；}
#tst{
显示：网格；
网格模板列：重复（2，1fr）；
最小高度：100vh；
背景:#555；
}
标签{
保证金：自动；
外观：按钮；
光标：指针；
最小宽度：6em；
文本对齐：居中；
}
#a,，
#b{/*隐藏收音机*/
位置：绝对位置；
右：100vw；
}
[for=“a”]，
#c{
网格行：1；
网格柱：1；
}
#c{
显示：网格；
网格模板列：1fr；
网格模板行：自动1fr；
背景：白色；
边框：实心；
过渡：0.5s；
字体大小：2vw；
}
#a:勾选~#c{
转换：translatex（0）
}
#b:勾选#c{
转换：translatex（100%）
}
h1{
保证金：自动；
}
#c.p[班级]{
保证金：自动；
网格柱：1；
网格行：2；
过渡：0.25s；
背景：继承；
颜色：#164fb7；
字体大小：3vw；
}
#c.p.b{
不透明度：0；
颜色：番茄；
}
#b:选中#c p.b{
不透明度：1
}
/*没有js、动画或绝对定位；）*/

左边
赖特
这里还是那里？
站在左边
站在右边

我建议使用
动画播放状态
属性并添加事件侦听器，而不是添加类：


一个
单击按钮的
侦听器

一次
animationiteration
到div
只需将播放状态从
暂停
更改为
运行
让我告诉你我的意思：


const-element=document.getElementById（“containerForm”）；
const btn=document.querySelector（“按钮”）；
函数动画（）{
element.style.animationPlayState=“running”；
}
函数stopAnimation（）{
element.style.animationPlayState=“暂停”；
}
btn.addEventListener（“单击”，动画）；
元素。addEventListener（“animationiteration”，stopAnimation）
.containerForm{
宽度：50px；
高度：50px；
背景色：红色；
动画：幻灯片2缓进缓出无限交替暂停；
}
@关键帧滑动{
0% {
变换：translateX（0）；
}
100% {
转化：translateX（100%）；
}

单击
.slide-back{
  animation: slide 2s ease-in-out;
  position: relative;
  animation-direction: reverse;
}