css转换只在Firefox中工作 [英] css transition only working in Firefox

问题描述

我试图使用CSS转换，当您将鼠标悬停在其上时，使菜单上的背景图像淡入淡出。我想要它大约2秒钟来淡化它。
它在Firefox中正常工作，但所有在其他浏览器，它只是立即出现。在IE它不工作，但我不担心，因为我从来没有预期它的工作。

I'm trying to use CSS transitions to make a background image fade in on my menu when you hover over it. I want it to take about 2 seconds to fade it. It works perfectly in Firefox but all on other browsers it just appears instantly. In IE it doesn't work at all but I'm not worried about that since I never expected it to work.

CSS布局

.mainmenu ul li{
    height: 86px;
    display: inline-block;
    margin: 0;
    padding: 0;
    z-index:1000;
    position: relative;
}
.mainmenu li:after{
    content: "";
    opacity: 0;
    -webkit-transition: opacity 1.5s;
    -moz-transition:    opacity 1.5s;
    -o-transition:      opacity 1.5s;
    -ms-transition:     opacity 1.5s;
    transition:         opacity 1.5s;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}
.mainmenu li:hover:after{
        opacity: 1;
}

CSS appeARANCE

CSS APPEARANCE

.mainmenu li:after{
    background: url(../images/hover.png) no-repeat center bottom;
}

HTML

<div class="mainmenu"><ul><li><a href=''>Home</a></li><li><a href=''>About Us</a></li><li><a href=''>Contact Us</a></li><li><a href=''>Blog</a></li><li><a href=''>Gallery</a></li></ul></div>

任何人都可以帮助？除了IE它的工作，它使图像显示，但它会是很好，获得褪色的Chrome，Safari和Opera的工作。如果我能得到它的工作，那么，我甚至可以考虑IE。

Can anyone help? Apart from IE it does work it making the image appear but it would be nice to get the fade in working on Chrome, Safari and Opera. If I can get it working then, I might even be able to think about IE.

推荐答案

正如@Tyriar所说，支持转换/动画对生成的内容是零碎的。它适用于我在最新的Chrome Canary（版本27.0.1444.3），所以很快它将在常规渠道。当这个地方，这将支持在IE10，Firefox 4+和Chrome。有一个值得注意的例外，Safari（和Opera，但与移动到WebKit ，可能会改变）。

As @Tyriar states, support for transitions/animations on generated content is patchy. It works for me in the latest Chrome Canary (Version 27.0.1444.3), so very soon it will be on the regular channel. When that lands, this will be supported in IE10, Firefox 4+ and Chrome. There's the notable exception of Safari (and Opera, but with the move to WebKit that might change).

现在最强大的解决方案是避免尝试转换之后内容，而是将其应用于您的现有元素之一。这样，您就可以获得68％的浏览器支持。

The most robust solution for now will be to avoid trying to transition the :after content and instead apply it to one of your existing elements. That will get you pretty good browser support at 68%.

这是您原始示例的分支。而不是使用生成的内容，我已经简化了CSS到这：

Here's a fork of your original example. Rather than using generated content, I've simplified the CSS to this:

.mainmenu li {
    position: relative;
    display: inline-block;
    height: 86px;
    margin: 0;
    padding: 0;
    background: url(http://placekitten.com/g/100/100) no-repeat center bottom;
}

.mainmenu li a {
    position: relative;
    display: block;
    height: 100%;
    background: #fff;
    transition: all 1.5s ease-in-out;
}

.mainmenu li a:hover {
    background: transparent;
}

这里，转换是 code>本身，从白色到透明，实现相同的效果。

Here, the transition is on the a itself, fading that from white to transparent to achieve the same effect.

这篇关于css转换只在Firefox中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！