Question

我遇到与CSS Transition not firing when adding class to body (Firefox)类似的问题，但我似乎找到了一种方法来解决它以不同方式定位元素或删除类。

这就是我所拥有的：

标记：

                <div class="ball b40 first">
                    <a class="ffx-fx" href="javascript:void(0)">

                    </a>
                </div>

的CSS：

.ffx-fx {
-webkit-transition: all 1.5s ease-in-out; 
   -moz-transition: all 1.5s ease-in-out;
     -o-transition: all 1.5s ease-in-out;
    -ms-transition: all 1.5s ease-in-out;
        transition: all 1.5s ease-in-out;
}
.b40 a          {
width:220px;
height:220px; 
background: url(../images/temp/1_a.jpg) center center; 
background-size: 100% 100% !important;

}

.b40 .b40-rotated {
width:220px;
height:220px; 
background: url(../images/temp/1_b.jpg) center center !important;

}

js：

window.setInterval(function() {
   $( ".b40 .ffx-fx" ).toggleClass( "b40-rotated" );
}, 5000);

Answer 1

我不相信你可以用转换来切换背景图像。至少我还没试过。我通常如何处理这种情况有两个内部div - 一个是on on hover类，另一个是off类。然后在悬停时，我改变了不透明度。不透明度转换有效。这样的东西......

HTML

<div class="container">
  <a href="">
   <div class="off_state"></div>
   <div class="on_state"></div>
 </a>
</div>

CSS

.container{position:relative;}
.off_state, .on_state{
    position:absolute;
    top:0;
    left:0;
    transition: all 1s;
}
.off_state, .container:hover .on_state{opacity:0.0;filter:alpha(opacity=0);}
.container:hover .on_state{opacity:1.0;filter:alpha(opacity=100);}

这是一个粗略的版本，但这就是我一直以来的做法。

注意：jQuery UI还能够缓慢添加类。您可以在此处查看：http://jqueryui.com/addClass/。它可能更容易使用。

css过渡不适用于Firefox

1 个答案: