CODEWITHSUNDEEP
htmlcsscss-transitions
d1ch0t0my
d1ch0t0my

Reputation: 443

Reverse CSS transition on uncheck

I'm having a problem reversing a transform when an input is unchecked. As it currently stands the transition doesn't fire it just instantly reverts back to the pre-checked state. I've tried using :not(:checked) but that doesn't seem to be working either.

You can see what I mean here:

 .overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 500ms;
  transition-timing-function: ease-in-out;
  }

  .toggle:checked ~ .overlay {
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 2;
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 200ms;
  transition-timing-function: ease-in-out;
  }

  .toggle:not(:checked) ~ .overlay {
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 500ms;
  transition-timing-function: ease-in-out;
  }

Here is a pen where you can see the issue - http://codepen.io/anon/pen/VarVyP. Any help or guidance is appreciated.

Edit I should have been clearer that the transition that is not reversing is the overlay opacity transition not the drawer push in transition. Unchecking the input moves the drawer back fine but the overlay just instantly reverts to pre-checked state without a transition.

Upvotes: 4

Views: 1888

Answers (1)

Aaron Lavers
Aaron Lavers

Reputation: 986

Basically, you need to define the width and height, as well as z-index in the initial overlay class. It looks like the overlay label is 0,0 in size when closed, and then 100%,100% when open. Telling it to be full size when it's closed is the solution from the looks of it (tested on Chrome)

EDIT: Also, on the .overlay layer, set pointer-events to none. This way, it's only activated on clicking the toggle button.

.overlay {
  pointer-events: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.4);
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 500ms;
  transition-timing-function: ease-in-out; }

.toggle:checked ~ .overlay {
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 2;
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 200ms;
  transition-timing-function: ease-in-out; }

.toggle:not(:checked) ~ .overlay {
  transition-property: opacity;
  transition-duration: 500ms;
  transition-delay: 500ms;
  transition-timing-function: ease-in-out; }

http://codepen.io/anon/pen/reYQQN

Upvotes: 3

Related Questions