CSS 过渡仅在类打开时激活，而不是关闭

Question

我对页面上的多个元素的过渡效果有问题。我正在尝试为我的响应式顶部导航菜单创建一个滑动侧菜单，当单击导航切换链接时，相对正文和固定标题栏位于右侧。

打开导航菜单时，从 0 到 200px 的位置过渡按预期工作，但在关闭导航菜单时，蓝色标题栏立即返回到 right: 0px ，但红色主要内容的过渡正常工作。您可以看到单词"nav"立即在红色过渡的其余内容之前移动。这在小提琴中并不明显，但在我正在构建的实际网站上，它非常明显。

以下是以下内容的 jsFiddle：

 $('.menu-toggle').click(function() {
   $('body, .header-bar').toggleClass('menu-open');
   return false;
 });

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
header {
  background-color: #c00;
  width: 100%;
  margin: 0;
  padding: 10px;
}
.menu-toggle {
  color: white;
  font-weight: bold;
  cursor: pointer;
  float: right;
  position: relative;
  right: 0;
}
.header-bar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 15%;
  background-color: #00c;
  margin: 0;
  padding: 15px;
}
.menu {
  overflow-x: hidden;
  position: relative;
  right: 0;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  padding-top: 5px;
}
.menu-open {
  right: 200px;
}
.menu-open .menu-side {
  right: 0;
}
.menu-side {
  background-color: #333;
  border-right: 1px solid #000;
  position: fixed;
  top: 0;
  right: -200px;
  width: 200px;
  height: 100%;
  padding: 10px;
}
.menu,
.menu-open,
.menu-side {
  -webkit-transition: right 0.2s ease;
}
.logo {
  width: 250px;
  height: 100px;
  color: white;
  font-weight: bold;
  font-size: 36px;
  float: left;
  position: relative;
}
.menu-side ul {
  list-style: none;
  padding-left: 0;
  margin: 0
}
.menu-side ul li a {
  color: #eee;
  text-decoration: none;
}
.menu-side ul li a:hover {
  text-decoration: underline;
}

<header>
  <div class="header-bar">
    <div class="logo">MWP</div>
    <div class="menu-toggle">Nav</div>
    <nav class="menu-side">
      <ul>
        <li><a href="#about-me">About Me</a>
        </li>
        <li><a href="#my-work">My Work</a>
        </li>
        <li><a href="#testimonials">Testimonials</a>
        </li>
        <li><a href="#contact-me">Contact Me</a>
        </li>
      </ul>
    </nav>
  </div>
  <!-- omitted content filler was here - found in jFiddle -->
</header>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

我已经多次检查我的 CSS，并检查 jQuery 是否正在添加/删除所需的类，但我看不到我做错了什么。我需要蓝色条保持在固定位置。

Answer 1

将过渡放在 .header-bar 上。目前，过渡不会在出路时播放，因为它应用于要删除的类。它将看起来像这样：

.menu,
.header-side,
.header-bar,
.menu-side{
  transition: right 0.2s ease;
}

如果要在输入过程中应用不同的过渡，则也将过渡应用于.menu-open。例如，此代码段将在进入途中提供较慢的过渡，在出路时提供快速过渡：

.header-bar {
  transition: right 0.2s ease;
}
.menu-open {
  transition: right 0.5s ease;
}

完整示例

请注意使用不带前缀的过渡。旧版浏览器可能需要 -webkit- 前缀。在无前缀属性上方添加前缀属性。

$('.menu-toggle').click(function() {
  $('body, .header-bar').toggleClass('menu-open');
  return false;
});

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
header {
  background-color: #c00;
  width: 100%;
  margin: 0;
  padding: 10px;
}
.menu-toggle {
  color: white;
  font-weight: bold;
  cursor: pointer;
  float: right;
  position: relative;
  right: 0;
}
.header-bar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 15%;
  background-color: #00c;
  margin: 0;
  padding: 15px;
}
.menu {
  overflow-x: hidden;
  position: relative;
  right: 0;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  padding-top: 5px;
}
.menu-open {
  right: 200px;
}
.menu-open .menu-side {
  right: 0;
}
.menu-side {
  background-color: #333;
  border-right: 1px solid #000;
  position: fixed;
  top: 0;
  right: -200px;
  width: 200px;
  height: 100%;
  padding: 10px;
}
.menu,
.menu-open,
.header-side,
.header-bar,
.menu-side{
  transition: right 0.2s ease;
}
.logo {
  width: 250px;
  height: 100px;
  color: white;
  font-weight: bold;
  font-size: 36px;
  float: left;
  position: relative;
}
.menu-side ul {
  list-style: none;
  padding-left: 0;
  margin: 0
}
.menu-side ul li a {
  color: #eee;
  text-decoration: none;
}
.menu-side ul li a:hover {
  text-decoration: underline;
}

<header>
  <div class="header-bar">
    <div class="logo">MWP</div>
    <div class="menu-toggle">Nav</div>
    <nav class="menu-side">
      <ul>
        <li><a href="#about-me">About Me</a>
        </li>
        <li><a href="#my-work">My Work</a>
        </li>
        <li><a href="#testimonials">Testimonials</a>
        </li>
        <li><a href="#contact-me">Contact Me</a>
        </li>
      </ul>
    </nav>
  </div>
  <!-- omitted content filler was here - found in jFiddle -->
</header>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>