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 ，您的动画首先工作然后停止工作，因为引导程序正在修改您的 html 中的 style 属性，并且它比 css 中的优先级更高class ，因此要覆盖样式和动画 bootstrap 提供您需要在 dropdown 的 style 属性中应用样式，

并且仅修改 trabslateY 将不起作用，因为您需要覆盖 translate3D，这些更改需要在 dropdown 和 bootstrap 使用 @ 的 show 和 hide 事件上发生987654337@ 隐藏dropdwon 时，您也需要覆盖它并使用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'); });
});

这是一个小提琴：https://jsfiddle.net/xpvt214o/19338/