0

这很好，几乎所有的 css3 功能在 firefox 上都很好用，现在我发现这个动画在 firefox 上不起作用？在 chrome 或 safari 上效果很好？有人能解释一下为什么吗？泰。

ul.curent_buser{
    background:#fff !important; 
    position: absolute;
    top: 100%;
    left: 0;
    background: transparent;
    border-top: 1px solid #eaeaea;
    list-style: none;
    margin-top: 15px;
    border: 1px solid #ccc;
    width: 100%;
    border-radius: 7px;
    -webkit-animation: trans 0.3s;
       -moz-animation: trans 0.3s;
        -ms-animation: trans 0.3s;
         -o-animation: trans 0.3s;
            animation: trans 0.3s;
    }

@keyframes trans {from {margin-top: 15px;} to {margin-top: 25px;}}
@-moz-keyframes trans { from {margin-top: 15px;} to {margin-top: 25px;}}
@-webkit-keyframes trans {from {margin-top: 15px;} to {margin-top: 25px;}}

小提琴

4

1 回答 1

1

我想说除了你提到的问题之外，你还有一些问题。

  • 在你小提琴的 html 中，你<a class="arrUp"></a>在<ul>. 唯一可以在 中的子元素类型<ul>是<li>. 改变这个搞砸了箭头的外观，但我相信你可以弄清楚。我只是让图像成为<ul>你对 parent 所做的背景<li>。
  • 过渡比动画更适合您的下拉菜单。这样，您可以让动画同时用于关闭和打开。在您当前的代码中，即使动画确实有效，当您关闭下拉菜单时，您要么必须创建另一个动画，要么让它消失。
  • 问题的根源在于 Firefox 在display类型更改之前没有运行动画。如果您不更改display类型，则动画将起作用。

这是我关于过渡的更改。

假设您将拥有多个项目，所以我将它们全部更改为隐藏而不是可见。

#main > li > ul {
    visibility: hidden;     
}

将动画更改为过渡，并将边距更新为具有初始值。

ul.curent_buser {
    background:#fff !important;
    position: absolute;
    top: 100%;
    left: 0;
    background: transparent;
    border-top: 1px solid #eaeaea;
    list-style: none;
    margin-top: -10px; /* set to initial position */
    border: 1px solid #ccc;
    width: 100%;
    border-radius: 7px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

我删除了所有动画并更改了焦点以更新边距和可见性。

#main li:focus ul {
    margin-top:25px;
    visibility: visible;
}

jsFiddle

于 2013-07-24T14:33:50.283 回答