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;
}

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

我发现删除/评论上面的CSS修复了所有浏览器中的问题，但我真的希望这个动画能够工作。

Answer 1

在不同的浏览器中，这样做的前缀很少

-webkit- Google Chrome

-moz- Firefox

-ms- Internet Explorer

-o- Opera

在您的代码中，您可以执行此操作

.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中无效

1 个答案: