CSS Mozilla过渡不起作用

Question

我有一个简单的过渡，可以在平滑悬停时将页脚 img 向上移动 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 VS Firefox 中自行检查。转到页脚并将鼠标悬停在每个项目上。

www.rjam.es

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

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 中效果很好（尽管我承认所有 setTimeouts 有点古怪），但是虽然滑块在技术上可以在 Firefox 中工作，但那里没有可见的过渡。

在Jim Jeffers' answer to a similar problem 之后，我能够让它在 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
}