Question

我有这个CSS：

div#dockWrapper{
    width: auto;
    display: inline-block;
    position: relative;
    border-bottom: solid 2px rgba(255, 255, 255, .35);
    line-height: 0; 
    transition: bottom 0.5s;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
}

div#dockWrapper:hover{
    bottom: 77px;
}

这个HTML

<div id="dockContainer">
    <div id="dockWrapper">
        <div class="cap left">                  
        </div>
        <ul class="osx-dock">
            <li>
            </li>
        </ul>   
    </div>
</div>

转换在Google Chrome中运行良好，但在Firefox和I.E.我是所有这些CSS3动画的新手，所以也许我需要了解一些基础知识。

上有其他动画

<li></li>

为我的HTML菜单制作一个“停靠点”，它们可以在所有浏览器上正常工作，但不能在“dockWrapper”上使用“底部”。

谢谢你，西蒙

Answer 1

对于非Firefox / Chrome浏览器，我添加了-o-transition，这将使较旧的Opera版本工作，transition，这将让IE10工作。 IE9不支持转换。

但是，Firefox需要明确声明X和Y的首发展示位置。试试这个：

#dockWrapper{
    width: auto;
    display: inline-block;
    position: relative;
    left:0;
    bottom:0;
    border-bottom: solid 2px rgba(255, 255, 255, .35);
    line-height: 0; 
    transition: bottom 0.5s;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

我之前有一个动画菜单项的相同问题，应用显式X / Y声明解决了它。希望它也适合你。

旁注，我在div之前删除了#dockWrapper限定符。只要您的HTML有效，您就不会有多个ID声明，因此不需要限定ID。它只是使CSS变慢而没有任何好处。

Answer 2

将bottom: 0添加到div#dockWrapper{。你需要一个过渡的地方。

根据http://caniuse.com/#feat=css-transitions，只有IE10 +支持transition属性。

带有Firefox / IE的CSS3过渡

2 个答案: