css transition-delay在safari桌面和safari以及chrome mobile中不起作用

时间：2017-12-24 14:03:14

标签： css animation safari mobile-safari mobile-chrome

所以我的动画如下。

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');


      });

由于

1 个答案:

答案 0 :(得分：0)

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

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

负的动画延迟会立即开始动画，好像已经过去了那么长的时间。 谢谢

相关问题
最新问题