Javascript 如何逆转CSS转换？

我正试着把这个精确的转换成反向。 第二组有一个延迟，所以在第一组完全消失之前它不可见。 我想要的是，如果在Div Two可见时单击按钮Two，Div Two将在Div One出现后消失。因此，这正是转变的反面

var One=document.getElementByIdone； var Two=document.getElementByIdtwo； 函数actionOne{ 1.style.height=0px； 2.style.height=200px； } 函数actionTwo{ 1.style.height=200px； 2.style.height=0px； } 一个{ 背景：橙色； 高度：200px； 溢出：隐藏； 过渡：2s； } 两个{ 背景：粉红色； 高度：0px； 溢出：隐藏； 过渡：2s； 过渡延迟：2s； } p{ 身高：100%； } 按钮一 按钮二 第一组

第二组

---

单击按钮时，应相应更改延迟

请参阅代码片段：

var One=document.getElementByIdone； var Two=document.getElementByIdtwo； 函数actionOne{ 1.style.height=0px； 2.style.height=200px； one.style.transitionLay='0s'； two.style.transitionLay='2s'； } 功能动作二{ 1.style.height=200px； 2.style.height=0px； one.style.transitionLay='2s'； two.style.transitionLay='0s'； } 一个{ 背景：橙色； 高度：200px； 溢出：隐藏； 过渡：2s； } 两个{ 背景：粉红色； 高度：0px； 溢出：隐藏； 过渡：2s； 过渡延迟：2s； } p{ 身高：100%； } 按钮一 按钮二 第一组

第二组

试试这个

var One=document.getElementByIdone； var Two=document.getElementByIdtwo； 函数actionOne{ 1.style.height=0px； 2.style.height=200px； } 函数actionTwo{ 2.style.height=0px； 1.style.height=200px； } 一个{ 背景：橙色； 高度：200px； 溢出：隐藏； 过渡：2s； 转换延迟：0s； } 两个{ 背景：粉红色； 高度：0px； 溢出：隐藏； 过渡：2s； 转换延迟：0s； } p{ 身高：100%； } 按钮一 按钮二 第一组

第二组

---

如果在我的项目中，div的高度相同，我会使用这个。当div彼此不相同时，这个解决方案看起来非常奇怪。