css 转换延迟在 safari 桌面和 safari 和 chrome 移动设备中不起作用

Question

所以我的动画如下。

Onclick 显示菜单并以小的过渡延迟逐个过渡元素。您可以在 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');


      });

谢谢

Answer 1

我意识到您必须使用负延迟才能使其在 iOS 上运行

#menuItem1 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}

负动画延迟会立即开始动画，就好像这段时间已经过去了一样。 谢谢