CSS mozilla transition不起作用

Question

当鼠标悬停时，我有一个简单的过渡效果，可以使页脚图像平稳地上移5px，然而Firefox没有应用平滑的过渡效果。只有webkit支持。

如下所示，我已经正确声明了所有的供应商前缀。

    #footer img {
        margin-left:8px;
        -webkit-transition:all .1s ease;
        -moz-transition:all .1s ease;
        -ms-transition:all .1s ease;
        transition:all .1s ease;
        cursor:pointer;

#footer img:hover {
    position:relative;
    top:-5px;

您可以在Safari/Chrome和Firefox中自行查看。转到页脚，悬停在每个项目上即可。

www.rjam.es

- Richard James

Answer 1

看起来Firefox需要先设置一个初始值，即使它是0。

#footer img {
     margin-left:8px;
     -webkit-transition:all .1s ease;
     -moz-transition:all .1s ease;
     -ms-transition:all .1s ease;
     transition:all .1s ease;
     cursor:pointer;
     position:relative;
     top:0;
}

#footer img:hover {
     top:-5px;
}

- Pierre

---

谢谢！我猜Firefox需要看到两种状态下都定义了top:？ - Richard James

Answer 2

虽然Pierre的答案之前对我有用，但最近我遇到了一个它无法解决的情况。实现一个简单的循环图片滑块，我使用以下代码。

HTML：

<ul id="slides">
    <li class="active">
        <img src="/.../0.jpg">
        <p>Caption</p>
    </li>
    <li class="active">
        <img src="/.../1.jpg">
        <p>Caption</p>
    </li>
    <!-- and so on -->
</ul>

CSS：

#slides {
    position: relative;
}
#slides li {
    position: absolute;
    top: 0;
    display: none;
    opacity: 0;
    -moz-transition: opacity 1s;
}
#slides li.active {
    display: block;
    opacity: 1;
}

以及 jQuery：

$(function(){
    animateSlide();
});

function animateSlide(){
    setTimeout(function(){
        var current = $('#slides li.active');
        var next = current.next();

        // If there is no next, use the first li
        if(!next.length){
            next = $('#slides li:first');
        }

        // Ensure both are displayed as block, to allow the opacity transition to show
        current.add(next).css('display', 'block');
        current.removeClass('active');

        setTimeout(function(){
            next.addClass('active');
            setTimeout(function(){
                current.css('display', 'none'); // Avoid elements overlapping each other
                animateSlide(); // Loop
            }, 1000); // The duration of the transition
        }, 1); // Workaround for letting the "next" var to render as block properly before applying the class which triggers the transition
    }, 6000); // Change image every 6 seconds
}

这在Safari/Chrome中运行得很好（尽管我承认所有setTimeout有些古怪），但是虽然滑块在Firefox中技术上可以工作，但那里没有任何过渡可见。

根据Jim Jeffers对类似问题的回答，我能够使它在Safari/Chrome和Firefox中平稳地工作，并且还大大简化了我的javascript代码。

更新的CSS：

#slides li {
    position: absolute;
    top: 0;
    height: 0;
    opacity: 0;
    -moz-transition: opacity 1s;
}
#slides li.active {
    height: auto;
    opacity: 1;
}

更新的jQuery：

function animateSlide(){
    setTimeout(function(){
        var current = $('#slides li.active');
        var next = current.next();

        // If there is no next, use the first li
        if(!next.length){
            next = $('#slides li:first');
        }

        current.removeClass('active');
        next.addClass('active');
        animateSlide(); // Loop
    }, 6000); // Change image every 6 seconds
}

- zykadelic