javascript - CSS Webkit 转换不起作用

Question

我是 Web 编程的新手，但遇到了一个问题。我想在我的下拉菜单中添加一个过渡，以便菜单本身从底部弹出并消失到底部。我添加了此代码，其中 translateY 为 50px 和缓入缓出过渡，但下拉列表似乎是静态的...

HTML:

    <div class="right-menu list-inline no-margin-bottom">
    <div class="list-inline-item dropdown">
      <a id="settings" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link setting dropdown-toggle"><span class="d-none d-sm-inline-block"><i class="fa fa-user-circle-o"></i> Jean Dupont</span></a>
      <div aria-labelledby="settings" class="dropdown-menu">
        <a rel="nofollow" href="#" class="dropdown-item"> <span>Option 1</span></a>
        <a rel="nofollow" href="#" class="dropdown-item"> <span>Option 2</span></a>
        <a rel="nofollow" href="#" class="dropdown-item"> <span>Option 3</span></a>
        <a rel="nofollow" id="logout" href="#" class="dropdown-item nav-link">Logout <i class="icon-logout"></i></a>
      </div>
    </div>
    <div class="list-inline-item logout">
      <a href="#" id="logout" class="nav-link">Logout <i class="icon-logout"></i></a>
    </div>
  </div>

CSS:

   nav.navbar .dropdown .dropdown-menu {

 -webkit-transform: translateY(50px);
 transform: translateY(50px);
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out; 

}

  nav.navbar .dropdown .dropdown-menu.active {

-webkit-transform: translateY(0);
transform: translateY(0);

}

 nav.navbar .dropdown-item {

padding: 1rem !important;
border-bottom: 1px solid #393c43;

}

这里似乎有错误，但我不确定:

     -webkit-transform: translateY(50px);
     transform: translateY(50px);
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out; 

我应该修复什么？谢谢!

Answer 1

问题不在于 -webkit-transform 或 -webkit-transition ，您的动画开始工作然后停止工作，因为 bootstrap 正在修改 style 属性在 html 中，它比 class 中的 css 具有更高的优先级，因此要覆盖样式和动画 bootstrap 提供您需要在 dropdown 的 style 属性中应用样式，

仅修改 trabslateY 是行不通的，因为您需要覆盖 translate3D，这些更改需要在 show 上进行，并且dropdown 和 bootstrap 的 hide 事件在隐藏 dropdwon 时使用 display:none所以你也需要覆盖它并使用 opacity

$('.dropdown').on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().css({ 
        'transform' : 'translate3d(5px, 40px , 0px)',
        'visibility' : 'visible',
        'opacity' : 1
    });
});

$('.dropdown').on('hide.bs.dropdown', function() {      
    $(this).find('.dropdown-menu').first().css({ 
        'transform' : 'translate3d(5px, 100px , 0px)',
        'display' : 'block',
        'visibility' : 'hidden',
        'opacity' : 0
    }, function(){ console.log('ended'); });
});

这是一个 fiddle :https://jsfiddle.net/xpvt214o/19338/