Javascript CSS Webkit转换不'；行不通

我对网络编程有点陌生，我遇到了一个问题。我想在我的下拉菜单中添加一个过渡，以便菜单本身从底部弹出并消失到底部。我添加了这段代码，translateY为50px，并且易于输入输出转换，但下拉列表似乎是静态的

HTML:

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

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

---

我该修什么？谢谢

问题不在于

-webkit transform

或

-webkit transition

，动画首先工作，然后停止工作，因为引导正在修改

html

中的

样式

属性，并且它比

类中的
css
具有更高的优先级，因此，要覆盖样式和动画
引导提供的样式，您需要在
下拉列表的
样式属性中应用样式

仅修改
trabslateY
将不起作用，因为您需要覆盖
translate3D
，这些更改需要在
下拉列表的
显示
和
隐藏
事件上发生，并且
引导
在隐藏
下拉菜单时使用
显示：无
，因此您也需要覆盖它并使用
不透明度

$('.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'); });
});

这里有一个小问题：
删除它不再使用的webkit嘿，谢谢你的回答，但我尝试了，但它仍然不起作用…寻求代码帮助的问题必须包含在问题本身中复制它所需的最短代码，最好是在。见欢迎：），很高兴我能帮忙
     -webkit-transform: translateY(50px);
     transform: translateY(50px);
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out; 

$('.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'); });
});