Bootstrap 下拉动画在 IE 和 Firefox 中不工作

Question

我正在使用 Bootstrap 制作我的第一个网站，我的 custom.css 中有以下 CSS 使我的导航栏中的下拉菜单具有精美的动画效果：

.open > .dropdown-menu {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);  
  opacity:1;
}

.dropdown-menu {
  opacity:3;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-animation-fill-mode: forwards;  
  animation-fill-mode: forwards; 
  -webkit-transform: scale(1, 0);
  display: block; 
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}

我是 Web 开发的新手，在制作我的网站时犯了只在一个浏览器 (Chrome) 中进行测试的新手错误。我的网站快完成了，所以我决定在其他浏览器中进行测试。我发现当我在IE和Firefox中运行站点时，下拉菜单已经打开，并且无法切换。

我发现 removing/commenting 以上 CSS 解决了所有浏览器中的问题，但我真的希望这个动画能正常工作。

Answer 1

好吧，在不同的浏览器中几乎没有前缀可以做到这一点

-webkit- 对于 Google chrome

-moz- 对于 Firefox

-ms- 用于 Internet Explorer

-o- 歌剧

在你的代码中你可以这样做

.open > .dropdown-menu {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
    transform: scale(1, 1);  
    opacity:1;
}

在你的所有模块和你用于动画

的关键帧中执行此操作

嗯，例如你可以看这个视频 keyframes

Bootstrap 下拉动画在 IE 和 Firefox 中不工作

Bootstrap dropdown animation not working in IE and Firefox

html

css

twitter-bootstrap

drop-down-menu