0
ポップアップサイドバーを備えた簡単な小さなページがあります。FirefoxでCSSトランジションが壊れています
メニューアイコン（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>
、 .bar2、 .bar3 {-webkit-遷移：0.4秒容易さ;}'だけWebKitのルールを持っている.. :) –
あなたのためには、あなたはまた、-mozを持っている必要があり移行します移行ルール – TheYaXxE