CODEWITHSUNDEEP
csssasscss-transitions
Jacob Birkett
Jacob Birkett

Reputation: 2125

Apply extra CSS property AFTER previous transition is completed

I have a sidebar that get's the class .closed when a button is clicked.

The animation to set width to zero is working perfectly. The problem is, I have a border on the left side of the sidebar, and when width is set to zero, it appears double thick because it meets with the border on the other side. So after the transition sets width: 0, I need to set border: none also.

This is what I have, in SCSS. (If you don't know, &.closed is the same as #sidebar.closed.)

#sidebar {
  border-left: solid $border-width $border-color;
  white-space: nowrap;
  overflow-x: hidden;
  width: $sidebar-width;
  transition: width $sidebar-animation;
  transition: border $sidebar-animation $sidebar-animation;
  // Here I tried to set the delay for border.

  &.closed {
    width: 0;
    border: none;
  }
}

That's not working. So how do I do it?

Upvotes: 1

Views: 1656

Answers (2)

Joe Fitzsimmons
Joe Fitzsimmons

Reputation: 200

As Santiago pointed out, you can't transition the shorthand 'border' property. But you can transition border-width and border-color.

You could try to transition the border to the same color as the background instead of none. You could also transition the width of the border to 0.

I tweaked your example a little for a quick and dirty way to make it work with a toggle for demo purposes.

$('button').click(function() {
  $('#sidebar').toggleClass("closed");
});
#sidebar {
  border-left-style: solid;
  border-left-color: black;
  border-left-width: 10px;
  white-space: nowrap;
  overflow-x: hidden;
  width: 300px;
  transition: all .25s;
  /* added for demo */
  background: purple;
}

#sidebar.closed {
  width: 0px;
  border-left-color: white;
  border-left-width: 0;
  border-left-style: solid;
  transition: all .25s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<p>Sidebar</p>
</div>

<button>Close sidebar</button>

Upvotes: 2

Santiago Rebella
Santiago Rebella

Reputation: 2449

I think border is not a valid transition property

https://www.w3.org/TR/css3-transitions/#transition-shorthand-propertyenter image description here

the answer from the image would be transition border-left-width to 0

Upvotes: 1

Related Questions