Почему анимация наведения CSS отличается от Firefox?

Question

Я хочу, чтобы выпадающее меню бутстрапа выпадало при наведении курсора, а не щелкнуло с некоторыми классными анимациями. Поэтому я написал следующий код, и он отлично работает с Google Chrome и Internet Explorer. Но он не работает в Firefox.

if (matchMedia) { 
 
    var mq = window.matchMedia("(min-width: 768px)"); 
 
    mq.addListener(WidthChange); 
 
    WidthChange(mq); 
 
} 
 

 
function WidthChange(mq) { 
 
    if (mq.matches) { 
 
     $(function() { 
 
      $('li.dropdown').hover(function() { 
 
       $(this).addClass('open'); 
 
      }, function() { 
 
       $(this).removeClass('open'); 
 
      }); 
 
     }); 
 
    } 
 
}

@media (min-width: 768px) { 
 
    ul.dropdown-menu { 
 
     opacity: 0; 
 
     transition: all 0.2s linear; 
 
     -webkit-transition: all 0.2s linear; 
 
     transform: translate(0, 10px); 
 
     -webkit-transform: translate(0, 10px); 
 
    } 
 
    li.open > ul.dropdown-menu { 
 
     -webkit-transform: translate(0, 0); 
 
     transform: translate(0, 0); 
 
     opacity: 1; 
 
    } 
 
    li.dropdown:hover ul.dropdown-menu { 
 
     display: block !important; 
 
    } 
 
}

<link href="https://jsfiddle.net/0jbxzh5w/1/vsn4ik.github.io/bootstrap-submenu/dist/css/bootstrap-submenu.css" rel="stylesheet"/> 
 
<script src="https://github.com/vsn4ik/bootstrap-submenu/blob/master/js/bootstrap-submenu.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="navbar-header"> 
 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse"> 
 
     <div class="container"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="dropdown"> <a href="#" tabindex="0" data-toggle="dropdown">Menu<span class="caret"></span></a> 
 

 
        <ul class="dropdown-menu" role="menu"> 
 
         <li class="dropdown-submenu"> <a href="#" tabindex="0" data-toggle="dropdown">Sub Menu</a> 
 

 
         </li> 
 
         <li class="dropdown-submenu"> <a href="#" tabindex="0" data-toggle="dropdown">Sub Menu</a> 
 

 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>

Вот jsfiddle: https://jsfiddle.net/0jbxzh5w/2/ Полноэкранный Preview: https://jsfiddle.net/0jbxzh5w/2/embedded/result/

Любой человек может сказать, что я сделал не так? Почему это не работает в firefox?

Answer 1

Вот способ сделать это с помощью только CSS:

CSS

@media (min-width: 768px) { 
    li.dropdown ul.dropdown-menu { 
     display: block; 
     opacity: 0; 
     left: -100000px; 
     -webkit-transform: translate(0, 10px); 
     transform: translate(0, 10px); 
     -webkit-transition: opacity 250ms, transform 250ms, left 0ms 250ms; 
     transition: opacity 250ms, transform 250ms, left 0ms 250ms; 
    } 

    li.dropdown:hover ul.dropdown-menu { 
     opacity: 1; 
     left: 0px; 
     -webkit-transform: translate(0, 0); 
     transform: translate(0, 0); 
     -webkit-transition: opacity 250ms, transform 250ms; 
     transition: opacity 250ms, transform 250ms; 
    } 
} 

JSFiddle demo

Из моего тестирования это работает в Firefox 38

Answer 2

Попробуйте этот код

if (matchMedia) { 
 
    var mq = window.matchMedia("(min-width: 768px)"); 
 
    mq.addListener(WidthChange); 
 
    WidthChange(mq); 
 
} 
 

 
function WidthChange(mq) { 
 
    if (mq.matches) { 
 
     $(function() { 
 
      $('li.dropdown').hover(function() { 
 
       $(this).addClass('open'); 
 
      }, function() { 
 
       $(this).removeClass('open'); 
 
      }); 
 
     }); 
 
    } 
 
}

@media (min-width: 768px) { 
 
    ul.dropdown-menu { 
 
     opacity: 0; 
 
     transition: all 0.2s linear; 
 
     -webkit-transition: all 0.2s linear; 
 
     -moz-transition: all 0.2s linear; 
 
     transform: translate(0, 10px); 
 
     -webkit-transform: translate(0, 10px); 
 
     -moz-transform: translate(0, 10px); 
 
    } 
 
    li.open > ul.dropdown-menu { 
 
     -webkit-transform: translate(0, 0); 
 
     -moz-transform: translate(0, 0); 
 
     transform: translate(0, 0); 
 
     opacity: 1; 
 
    } 
 
    li.dropdown:hover ul.dropdown-menu { 
 
     display: block !important; 
 
    } 
 
}

<link href="https://jsfiddle.net/0jbxzh5w/1/vsn4ik.github.io/bootstrap-submenu/dist/css/bootstrap-submenu.css" rel="stylesheet"/> 
 
<script src="https://github.com/vsn4ik/bootstrap-submenu/blob/master/js/bootstrap-submenu.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="navbar-header"> 
 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse"> 
 
     <div class="container"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="dropdown"> <a href="#" tabindex="0" data-toggle="dropdown">Menu<span class="caret"></span></a> 
 

 
        <ul class="dropdown-menu" role="menu"> 
 
         <li class="dropdown-submenu"> <a href="#" tabindex="0" data-toggle="dropdown">Sub Menu</a> 
 

 
         </li> 
 
         <li class="dropdown-submenu"> <a href="#" tabindex="0" data-toggle="dropdown">Sub Menu</a> 
 

 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>