How to reverse CSS transition?

Question

I'm trying to make this exact transition to reverse. Div Two has a delay so it doesn't become visible before Div One is completely gone. What I want is that if you click on button Two when Div Two is visible, Div Two disappears after that div One appears. So exactly the reverse of the transition.

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>

Chiller · Accepted Answer · 2018-04-25 10:27:02Z

You should change the delay when clicking on the button accordingly

See code snippet:

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>

Vaibhav Gehlot · Accepted Answer · 2018-04-25 10:47:37Z

0

Try this

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

#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%;
}

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

answered Apr 25, 2018 at 10:47

Vaibhav Gehlot

605 bronze badges

1 Comment

Yorick Over a year ago

I would've used this if in my project the divs were the same height. This solution looks really odd when the divs aren't identical to each other.

Collectives™ on Stack Overflow

How to reverse CSS transition?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related