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?