Javascript 所需金额之间的转换

元素具有类

滑块项

：

.slider-item{
  transform: translateY(100%);
  transition: transform 100s ease;
  transition-delay: 800ms;
 }

单击按钮时，我希望元素在

translateY（-100%）

和

translateY（0）

之间转换

我分别通过javascript添加类

prev version

和

next

：

.slider-item.prev-version{
  transform: translateY(-100%);
  transition: none;
}
.slider-item.next{
  transform: translateY(0);
  transition: transform 100s ease;
  transition-delay: 800ms;
}

---

但我看到转换发生在

translateY（100%）

和

translateY（0）

之间<代码>下一步类重写

转换：translateY（-100%）在
prev version
类中。请帮助我该怎么做？
最好尝试使用普通JavaScript、jQuery或其他类型的框架直接编辑和更改CSS属性

例如，jQuery版本将是：

$("#slider-item.next").css("transform:translateY(0)");

请记住，您需要添加逻辑，以便如果属性为100，它会将其更改回0，如果属性为0，它会将其更改回100

w3schools.com/jquery/jquery_css.asp
我可能不理解你的问题，但似乎你可以使用
css动画
：


document.querySelector（'button'）.addEventListener（'click'，function（）{document.querySelector（'.slider item'）.classList.add（'example'）；}）
按钮{位置：固定；底部：10vh}/*仅用于演示*/
.滑块项目{
转化：translateY（100%）；
转型：转型100秒轻松；
过渡延迟：800ms；
}
.举例{
动画：示例3s轻松输入输出；
}
@关键帧示例{
来自{transform:translateY（-100%）；}
to{transform:translateY（100%）；}/*应该与.slider项上声明的初始值相同*/
}
滑块项
单击