javascript - 如何反转 CSS 过渡？

Question

我正试图使这个确切的转变逆转。Div Two 有延迟，因此在 Div One 完全消失之前它不会变得可见。我想要的是，如果您在 Div Two 可见时单击按钮 Two，则 Div Two 在该 div One 出现后消失。所以完全相反的过渡。

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";
}

#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 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>