如何逆转CSS过渡？

Question

我试图让这个确切的过渡逆转。 Div Two有一个延迟，因此在Div One完全消失之前它不会变得可见。 我想要的是，当你看到Div Two时，如果点击按钮2，Div div就会消失。所以恰好与过渡相反。

＆＃13;

＆＃13;

var One = document.getElementById("one");
var Two = document.getElementById("two");

function actionOne() {
  one.style.height = "0px";
  two.style.height = "200px";
}

function actionTwo() {  
  one.style.height = "200px";
  two.style.height = "0px";
}

＆＃13;

#one {
  background: orange;
  height: 200px;
  overflow: hidden;
  
  transition: 2s;
}

#two {
  background: pink;
  height:0px;
  overflow: hidden;
  
  transition: 2s;
  transition-delay: 2s;
} 

p {
  height: 100%;
}

＆＃13;

<button onclick="actionOne()">Button One</button>
<button onclick="actionTwo()">Button Two</button>		

<div id="one">
  <p>Div One</p>
</div>
<div id="two">
  <p>Div Two</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

相应地点击按钮时应该更改延迟

请参阅代码段：

var One = document.getElementById("one");
var Two = document.getElementById("two");

function actionOne() {
  one.style.height = "0px";
  two.style.height = "200px";

  one.style.transitionDelay = '0s';
  two.style.transitionDelay = '2s';
}

function actionTwo() {
  one.style.height = "200px";
  two.style.height = "0px";

  one.style.transitionDelay = '2s';
  two.style.transitionDelay = '0s';
}

#one {
  background: orange;
  height: 200px;
  overflow: hidden;
  transition: 2s;
}

#two {
  background: pink;
  height: 0px;
  overflow: hidden;
  transition: 2s;
  transition-delay: 2s;
}

p {
  height: 100%;
}

<button onclick="actionOne()">Button One</button>
<button onclick="actionTwo()">Button Two</button>

<div id="one">
  <p>Div One</p>
</div>
<div id="two">
  <p>Div Two</p>
</div>

Answer 2

试试这个

＆＃13;

＆＃13;

var One = document.getElementById("one");
var Two = document.getElementById("two");

function actionOne() {

  one.style.height = "0px";
  two.style.height = "200px";
  
}

function actionTwo() {  
  two.style.height = "0px";
  one.style.height = "200px";
}

＆＃13;

#one {
  background: orange;
  height: 200px;
  overflow: hidden;
  
  transition: 2s;
  transition-delay: 0s;
}

#two {
  background: pink;
  height:0px;
  overflow: hidden;
  
  transition: 2s;
  transition-delay: 0s;
} 

p {
  height: 100%;
}

＆＃13;

<button onclick="actionOne()">Button One</button>
<button onclick="actionTwo()">Button Two</button>		

<div id="one">
  <p>Div One</p>
</div>
<div id="two">
  <p>Div Two</p>
</div>

＆＃13;

＆＃13;

＆＃13;