CSS过渡未同步

Question

我正在创建一个侧边栏形状的侧边栏，该侧边栏可以切换进出。我使用纯CSS创建侧边栏，并且在滑入/滑出过渡期间，css元素未保持同步。

我尝试在Codepen中复制该问题，但该问题仍然存在，并且不确定如何尝试。

这是codepen中的问题：https://codepen.io/anon/pen/YorKLr

var btn = "#toggler";
var sidebar = "#sidebar"
var rect = "#rect";
var triangle = "#triangle";
var triangleBorder = "#triangle-border";

$(btn).click(function() {
    $(sidebar).toggleClass("hidden");
    $(rect).toggleClass("hidden");
    $(triangle).toggleClass("hidden");
    $(triangleBorder).toggleClass("hidden");
})

#toggler {
  position: relative;
  left: 500px;
}

#sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 80vh;
  transition: left 0.5s ease-in-out;
}

#sidebar.hidden {
  position: fixed;
  left: -200px;
  top: 0;
  width: 200px;
  height: 80vh;
}

.rect {
  background: #2f2a2a;
  border-right: 3px solid #d39627;
  width: 197px;
  height: 78vh;
  transition: left 0.5s ease-in-out;
}

.rect.hidden {
  background: #2f2a2a;
  border-right: 3px solid #d39627;
  width: 197px;
  height: 78vh;
  position: relative;
  left: -200px;
}

.triangle {
  position: relative;
  top: -1px;
  border-color: #2f2a2a transparent;
  border-style: solid;
  border-width: 72px 196px 0px 0px;
  height: 0px;
  width: 0px;
  transition: left 0.5s ease-in-out;
}

.triangle.hidden {
  position: relative;
  top: -1px;
  left: -200px;
  border-color: #2f2a2a transparent;
  border-style: solid;
  border-width: 72px 196px 0px 0px;
  height: 0px;
  width: 0px;
}

.triangle-border {
  border: none;
  background-color: #d39627;
  position: absolute;
  top: calc(78vh + 27px);
  left: -10px;
  width: 215px;
  height: 3px;
  transform: rotate(-20.1deg);
  transition: left 0.5s ease-in-out;
  z-index: 2;
}

.triangle-border.hidden {
  border: none;
  background-color: #d39627;
  position: absolute;
  top: calc(78vh + 27px);
  left: -210px;
  width: 213px;
  height: 3px;
  transform: rotate(-20.1deg);
  z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" style="background-size: stretch;">
        <div id="rect" class="rect"></div>
        <div id="triangle" class="triangle"></div>
        <hr id="triangle-border" class="triangle-border"></div>
<button id="toggler">Toggle</button>

我不确定为什么会这样，我已经确保将transition: left 0.5s ease-in-out;类添加到每个元素中。 Tt好像bg突然消失了，而hr慢慢滑开以重新出现，好像bg早于hr来了。