css transition-delay не работает в Safari Desktop и Safari и Chrome Mobile
Так что моя анимация следующая.
Кликните по меню и покажите элемент по очереди с небольшой задержкой перехода. Вы можете увидеть поведение там www.evesaintjean.com (рабочий стол Chrome или Firefox)
Тем не менее, на Safari (рабочий стол) или Chrome/ Safari (мобильный). Анимация меню отображается мгновенно вместо отображения эффекта. Я чувствую, что у меня есть все необходимое, чтобы заставить это работать, но это не так. Я посмотрел, может быть, вопросы, но нигде не мог найти ответ. Может быть, это что-то супер простое.
Вот код:
HTML
<div class="menu-bars">
<span id="bar1" class="bars"></span>
<span id="bar2" class="bars"></span>
</div>
<ul id="SiteNav">
<li class="">
<a href="/pages/about" aria-has-popup="true" aria-expanded="false" id="menuItem">
About
</a>
</li>
<li class="">
<a href="/pages/disonnances" aria-has-popup="true" aria-expanded="false" id="menuItem1">
Disonnances
</a>
</li>
<li class="">
<a href="/pages/09-06-17" aria-has-popup="true" aria-expanded="false" id="menuItem2" >
09-06-17
</a>
</li>
<li class="">
<a href="/pages/projects-and-collabs" aria-has-popup="true" aria-expanded="false" id="menuItem3" >
Projects and Collabs
</a>
</li>
<li class="">
<a href="/collections/shop" aria-has-popup="true" aria-expanded="false" id="menuItem4" >
Shop
</a>
</li>
<li class="">
<a href="/pages/exhibitions-and-press" aria-has-popup="true" aria-expanded="false" id="menuItem5" >
Exhibitions and Press
</a>
</li>
<li class="">
<a href="/pages/contact" aria-has-popup="true" aria-expanded="false" id="menuItem6" >
Contact
</a>
</li>
</ul>
CSS
.display {
visibility: visible !important;
}
#menuItem {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
}
#menuItem1 {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
-o-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
#menuItem2 {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
-o-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
#menuItem3 {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
-o-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
#menuItem4 {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
-o-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
#menuItem5 {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
#menuItem6 {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
-o-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
#menuItem:hover,#menuItem1:hover, #menuItem2:hover, #menuItem3:hover, #menuItem4:hover, #menuItem5:hover, #menuItem6:hover {
-o-transform:translateX(10px);
-moz-transform:translateX(10px);
-webkit-transform:translateX(10px);
transform:translateX(10px);
-o-transition-delay: 0s !important;
-moz-transition-delay: 0s !important;
-webkit-transition-delay: 0s !important;
transition-delay: 0s !important;
color: black;
text-decoration: none;
}
#menuItemindex:hover, #menuItem1index:hover, #menuItem2index:hover,#menuItem3index:hover,#menuItem4index:hover,#menuItem5index:hover,#menuItem6index:hover{
-o-transform:translateX(10px);
-moz-transform:translateX(10px);
-webkit-transform:translateX(10px);
transform:translateX(10px);
-o-transition-delay: 0s !important;
-moz-transition-delay: 0s !important;
-webkit-transition-delay: 0s !important;
transition-delay: 0s !important;
color: black;
text-decoration: none;
}
#menuItemindex, #menuItem1index, #menuItem2index,#menuItem3index,#menuItem4index,#menuItem5index,#menuItem6index {
-o-transition: 0.6s ease-out;
-moz-transition: 0.6s ease-out;
-webkit-transition: 0.6s ease-out;
transition: 0.6s;
}
#menuItem-mobile {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
}
#menuItem1-mobile {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
-o-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
#menuItem2-mobile {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
-o-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
#menuItem3-mobile {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
-o-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
#menuItem4-mobile {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
-o-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
#menuItem5-mobile {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
#menuItem6-mobile {
opacity: 0;
-o-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
transition: 0.4s ease-out;
-o-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
#menuItem-mobile:hover,#menuItem1-mobile:hover, #menuItem2-mobile:hover, #menuItem3-mobile:hover, #menuItem4-mobile:hover, #menuItem5-mobile:hover, #menuItem6-mobile:hover {
-o-transform:translateX(10px);
-moz-transform:translateX(10px);
-webkit-transform:translateX(10px);
transform:translateX(10px);
-o-transition-delay: 0s !important;
-moz-transition-delay: 0s !important;
-webkit-transition-delay: 0s !important;
transition-delay: 0s !important;
color: black;
text-decoration: none;
}
.show {
opacity: 1 !important;
}
JS
$( document ).ready(function() {
$(".menu-bars").click(function(){
$('#SiteNav').toggleClass("display");
$("#bar1").toggleClass("rotatebar1");
$("#bar2").toggleClass("rotatebar2");
$("#menuItem").toggleClass("show");
$("#menuItem1").toggleClass("show");
$("#menuItem2").toggleClass("show");
$("#menuItem3").toggleClass("show");
$("#menuItem4").toggleClass("show");
$("#menuItem5").toggleClass("show");
$("#menuItem6").toggleClass("show");
});
$(".menu-bars-mobile").click(function(){
$('#SiteNav-mobile').toggleClass("display");
$("#bar1-mobile").toggleClass("rotatebar1");
$("#bar2-mobile").toggleClass("rotatebar2");
$("#menuItem-mobile").toggleClass("show");
$("#menuItem1-mobile").toggleClass("show");
$("#menuItem2-mobile").toggleClass("show");
$("#menuItem3-mobile").toggleClass("show");
$("#menuItem4-mobile").toggleClass("show");
$("#menuItem5-mobile").toggleClass("show");
$("#menuItem6-mobile").toggleClass("show");
console.log('clicked');
});
Спасибо
1 ответ
Я понял, что вы должны использовать отрицательную задержку, чтобы она работала на iOS
#menuItem1 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
Отрицательная задержка анимации запускает анимацию немедленно, как если бы это количество времени уже прошло. Спасибо