html - CSS 转换在 Firefox 中不起作用

标签 html css firefox transition

我已经尝试了很多并且已经在 Google 中进行了搜索,但是我没有找到解决我的问题的方法:

我制作了一个 jsfiddle 供您查看我的源代码:Click here for my Source Code

一切正常。但是转换在 Firefox 中不起作用。

这是我的源代码,因为如果我想使用 jsfiddle,我也必须发布它!

<nav>
        <ul>
            <li><a href="#" class="active">Startseite</a></li>
            <li><a href="#">Projekte</a>
                <ul>
                    <li><a href="#">Java / Bukkit</a></li>
                    <li><a href="#">Webdesign</a></li>
                    <li><a href="#">PHP | MySQL</a></li>
                </ul>
            </li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Über mich</a></li>
        </ul>
        <div class="clear"></div>
    </nav>

//CSS 向下\\HTML 向上

nav{
        background: #333;
        color: #fff;
        padding: 5px;   
    }

nav ul{
    padding: 0px;
    margin: 0px;
    list-style: none;
}

nav ul li{
    float:left; 
}

nav ul li a{ 
    color: #fff;
    background: #585858;
    padding: 10px;
    margin-right: 5px;
    display: block;
    text-decoration: none;
    border: 1px solid white;
}

nav ul li a.active{
    background: #373737;
}

nav ul li a:hover{
    color: #333;
    background: #fff;
    border: 1px solid black;    
}

nav ul li ul{
    position: absolute;
    height: 0px;
    overflow: hidden;   
}

nav ul li ul li{
    float: none;
}

nav ul li:hover ul{
    overflow: visible;  
}

nav ul li:hover ul li a{
    padding: 10px;  
}

nav ul li ul li a{
    -webkit-transition: 0.3s;
       -moz-transition: 0.3s;
        -ms-transition: 0.3s;
         -o-transition: 0.3s;
            transition: 0.3s;               
    padding: 0px 10px;
}

最佳答案

看起来从容器中移除 overflow:hidden 突然让转换工作了。这让我相信这是 Firefox 中的一个“优化”,它不计算“隐藏”元素。

就我个人而言,我用它来产生类似的效果:与其隐藏元素,不如正常地给它 transform:scaleY(0);transform:scaleY(1) ; 悬停。

关于html - CSS 转换在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23079439/

相关文章:

javascript - 在触摸设备上水平滑动元素

javascript - 火狐扩展 : Inject javascript into page before standard page javascript is loaded

html - 具有软滚动和静态导航栏的单页网站

javascript - 如何在带有 Javascript 源的 Firefox 扩展(XUL 文件)中使用 SQLite?

javascript - Firefox 不会更新对 CSS 动画的更改

jquery - 多选下拉重置在 dropkick.js 中不起作用

php - 有撇号时搜索不起作用

javascript - 使用复选框 jquery 选择/取消选择文本字段

javascript - 间隔两个 div 并阻止它们相互连接

css - 动态创建组件的 Angular 2 位置