0
Итак, у меня есть простая маленькая страница с всплывающей боковой панелью.CSS Переход в Firefox
Когда вы нажимаете значок меню (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>
для '.bar1, .bar2, .bar3 { -webkit-переход: 0.4 сек легкость;}' у вас есть только правила WebKit .. :) –
для вас переходов необходимо также иметь -moz -переходное правило – TheYaXxE