html - CSS Transition 在 Firefox 中被破坏

Question

所以我有一个带有弹出侧边栏的简单小页面。

当您单击菜单图标(3 个条)时，它会使用过渡使马铃薯和菜单图标移动/更改。

当导航栏打开时，过渡在所有浏览器中都可以正常工作，但是当关闭时，所有过渡在所有浏览器中都可以正常工作，但在 Firefox 中除外，其中 3 个栏没有动画，只是跳回。

我想提供更多信息，但我真的不知道还能说什么。

$(".open").click(function() {
  window.location = "#menu";
  history.pushState("", document.title, window.location.pathname);
  $(".bars").toggleClass("change");
});
$(".close").click(function() {
  window.location = "#";
  history.pushState("", document.title, window.location.pathname);
  $(".bars").toggleClass("change");
});

@import url(//fonts.googleapis.com/css?family=Open+Sans);
* {
  margin: 0;
  padding: 0;
}

body {
  background: #f4f4f4;
  font-family: 'open sans', serif;
}

header {
  background: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
}

.potato {
  position: fixed;
  z-index: 2;
  width: 75px;
  margin: 19.125px;
}

.potato:hover {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  cursor: pointer;
}

.potato:active {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.75));
  cursor: pointer;
}

#title {
  color: #0d8aed;
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
}

#content {
  background: #fff;
  color: #0a6ebd;
  font-size: 20px;
  padding: 10px 20px;
  width: 75%;
  min-height: 500px;
  margin-top: 125px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
}

#menu a {
  text-decoration: none;
}

.nav-control {
  float: right;
  width: 100%;
  transition: width 0.4s ease;
}

#menu {
  position: fixed;
  z-index: 4;
  top: 0;
  width: 0;
  height: 100%;
  background: #e9e9e9;
  overflow-y: auto;
  transition: width 0.4s ease;
}

#menu a {
  color: #000;
  display: block;
  text-align: center;
  padding: 15px;
}

#menu a:hover,
#menu a:focus {
  color: #fff;
  background: #0d8aed;
}

.close {
  display: none;
}

#menu:target {
  width: 10%;
}

#menu:target + .nav-control {
  width: 90%;
}

#menu:target + .nav-control .open {
  display: none;
}

#menu:target + .nav-control .close {
  display: block;
}

p {
  padding-bottom: 15px;
}

.bars {
  display: inline-block;
  position: absolute;
  top: 32px;
  left: 42px;
  z-index: 5;
  -webkit-transition: 0.4s ease;
}

.bar1,
.bar2,
.bar3 {
  top: 0;
  left: 0;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 6px 0;
  -webkit-transition: 0.4s ease;
}

.bars.change {
  left: calc(10% + 43px);
  top: 34px;
  transition: 0.4s ease;
}

.change .bar1 {
  transform: rotate(-45deg) translate(-5.75px, 4px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: rotate(45deg) translate(-7.8px, -7.8px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header>
  <nav id="menu">
    <a href="javascript:void(0);">Home</a>
    <a href="javascript:void(0);">Link1</a>
    <a href="javascript:void(0);">Link2</a>
    <a href="javascript:void(0);" class="close">Current</a>
  </nav>
  <div class="nav-control">

    <a href="javascript:void(0);" class="open">
      <div class="bars">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
      <img class="potato" src="https://www.limitlovespotato.es/potato.png">
    </a>

    <a href="javascript:void(0);" class="close">
      <div class="bars">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
      <img class="potato" src="https://www.limitlovespotato.es/potato.png">
    </a>

  </div>
  <h1 id="title">HEADER TITLE</h1>
</header>
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pugnant Stoici cum Peripateticis. Si quae forte-possumus. Aufert enim sensus actionemque tollit omnem. Restinguet citius, si ardentem acceperit. </p>

  <p>Id enim natura desiderat. Num quid tale Democritus? Equidem e Cn. Sed haec in pueris; </p>

  <p>Recte dicis; Videamus animi partes, quarum est conspectus illustrior; At multis se probavit. Conferam tecum, quam cuique verso rem subicias; </p>

  <p>Fortemne possumus dicere eundem illum Torquatum? Equidem e Cn. Itaque hic ipse iam pridem est reiectus; Hic nihil fuit, quod quaereremus. Est, ut dicis, inquit; Quare conare, quaeso. </p>

  <p>Cave putes quicquam esse verius. Quid adiuvas? Duo Reges: constructio interrete. Neutrum vero, inquit ille. Minime vero, inquit ille, consentit. Cur iustitia laudatur? </p>
</div>

Answer 1

为了使其适用于所有浏览器，您必须为所有不同的浏览器添加动画。

在你的情况下，你将使用

-moz-transition

例如，这些是 CSS3 转换声明:

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

这是我最喜欢的有助于加快流程的工具之一:http://css3generator.com/