CODEWITHSUNDEEP
javascripthtmlcss
user15573857
user15573857

Reputation:

Transition going only one way when removing class

I'm trying to create a sidebar like this:

function show_menu(){

  document.querySelector('#sidebar').classList.toggle('sidebar_open');
  document.querySelector('#blackscreen').classList.toggle('blackscreen_open');

}
#hamburger {
  width: 5rem;
  height: 5rem;
  background-color: red;
}

#header_wrapper {
  display: block;
}


#sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100vh;
  transition: width 0.25s;
}

.sidebar_open {
  width: 50% !important;
  background-color: green;
  display: grid !important;
}
#blackscreen{
position:fixed;
top:0;
right:0;
width:100vw;
height:100vh;
transition: background-color 0.25s;
}

.blackscreen_open {
  background-color: rgba(0, 0, 0, 0.5);
}
    <div id="hamburger" onclick="show_menu()">click here</div>
    <div id='blackscreen' onclick="show_menu()"></div>
    <span id='sidebar'>
    </span>

but the sidebar transition only works one way,
My best guess is that the transition requires 2 classes to operate but since I've removed one class the transition back might not be taking place so I tried the solution according to this question like this:

function show_menu(){

  document.querySelector('#sidebar').classList.toggle('sidebar_open');
  document.querySelector('#blackscreen').classList.toggle('blackscreen_open');

}
#hamburger {
  width: 5rem;
  height: 5rem;
  background-color: red;
}

#header_wrapper {
  display: block;
}


#sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100vh;
}

#sidebar:not(.sidebar_open) {
    transition: width 0.25s;
}

.sidebar_open {
  width: 50% !important;
  background-color: green;
  display: grid !important;
}

#blackscreen {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  transition: background-color 0.25s;
}

.blackscreen_open {
  background-color: rgba(0, 0, 0, 0.5);
}
    <div id="hamburger" onclick="show_menu()">click here</div>
    <div id='blackscreen' onclick="show_menu()"></div>
    <span id='sidebar'>
    </span>

but as you can see even that didn't work

I'm pretty sure I'm missing something obvious but any & all help is greatly appreciated!

Upvotes: 0

Views: 40

Answers (2)

Unmitigated
Unmitigated

Reputation: 89527

You need to have the background-color set even when the sidebar is not open. Otherwise, when the class is removed, you can no longer see it even though the width is being animated.

#sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100vh;
  background-color: green;
  transition: width 0.25s;
}


function show_menu() {
  document.querySelector('#sidebar').classList.toggle('sidebar_open');
  document.querySelector('#blackscreen').classList.toggle('blackscreen_open');
}
#hamburger {
  width: 5rem;
  height: 5rem;
  background-color: red;
}

#header_wrapper {
  display: block;
}

#sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100vh;
  background-color: green;
  transition: width 0.25s;
}

.sidebar_open {
  width: 50% !important;
  display: grid !important;
}

#blackscreen {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  transition: background-color 0.25s;
}

.blackscreen_open {
  background-color: rgba(0, 0, 0, 0.5);
}
<div id="hamburger" onclick="show_menu()">click here</div>
<div id='blackscreen' onclick="show_menu()"></div>
<span id='sidebar'></span>

Upvotes: 0

stevecomrie
stevecomrie

Reputation: 2483

I'm fairly certain that the transition IS working but you're not seeing it because when it's not open, your sidebar doesn't have a background colour, and since you don't have a transition setting for your background attribute, when you remove the sidebar_open class the background colour IMMEDIATELY reverts to none and the width transition becomes invisible.

You should be able to test this by moving background-color: green; from the .sidebar_open class to the #sidebar element.

Upvotes: 1

Related Questions