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

虽然皮埃尔的回答以前对我有用，但我最近偶然发现了一个没有回答的情况。实现一个简单的循环图像滑块，我使用以下内容。

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

CSS mozilla过渡不起作用

2 个答案: