是否可以使Twitter Bootstrap Dropdown菜单逐渐淡入? [英] Is it possible to get Twitter Bootstrap Dropdown menus to fade in?

问题描述

我正在尝试使Twitter Bootstrap上的标准导航栏下拉菜单逐渐淡入而不是仅仅出现.我尝试添加类fade和in，但是它似乎没有消失.这是我的小提琴 http://jsfiddle.net/byronyasgur/5zr4r/10/.

I am trying to get the standard navbar dropdown menu on Twitter Bootstrap to fade in instead of just appear. I have tried adding the classes fade and in but it doesn't appear to fade. Here is my fiddle http://jsfiddle.net/byronyasgur/5zr4r/10/.

我尝试了另一种方式-例如，在这个问题上的答案，但是由于某种原因，我无法使用jquery定位下拉触发器.

I have tried going about it another way - eg the answer on this question but I'm having trouble targeting the dropdown trigger with jquery for some reason.

推荐答案

玩这个，看起来CSS动画效果最好.

Playing around with this, it looks like CSS animations work the best.

.open > .dropdown-menu {
  animation-name: slidenavAnimation;
  animation-duration:.2s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;

  -webkit-animation-name: slidenavAnimation;
  -webkit-animation-duration:.2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: slidenavAnimation;
  -moz-animation-duration:.2s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: forwards;
}
@keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

您可以添加其他CSS属性，以制作更复杂的动画.例如，我一直在玩left:-30-> left:0.

You can add other CSS properties in order to make more complicated animations. For example, I've been playing with left: -30 -> left: 0.

这篇关于是否可以使Twitter Bootstrap Dropdown菜单逐渐淡入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！