在 Mozilla FF 中不会发生过渡效果
Posted
技术标签:
【中文标题】在 Mozilla FF 中不会发生过渡效果【英文标题】：Transition effect won't take place in Mozilla FF 【发布时间】：2014-07-29 23:25:31 【问题描述】：我有一个缩略图列表（投资组合项目），其中有一些悬停动画。因此，缩略图图像变成灰度，变得模糊和变亮一点。但是，我需要它流畅，所以我使用了过渡，它在 Safari、Chrome 和 Opera 中运行良好，但在 Mozilla Firefox 中失败（我目前正在 Mac/FF 29 上测试它）。 这是 html 部分：
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<a href="#gallery_1" data-toggle="lightbox">
<img src="img/gallery/gallery_1.jpg" class="greyer" >
</a>
</div>
</li>
CSS如下：
.greyer
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
.greyer:hover
-webkit-filter: grayscale(100%) brightness(140%) blur(1px);
-o-filter: grayscale(100%) brightness(140%) blur(1px);
-moz-filter: grayscale(100%) brightness(140%) blur(1px);
-ms-filter: grayscale(100%) brightness(140%) blur(1px);
filter: grayscale(100%) brightness(140%) blur(1px);
filter: url(grayblurr.svg#grayscaledBlur);
提前感谢您的提示和解决方法！
【问题讨论】：
-moz-filter 无效。在您拥有的过滤器中，FF 将使用filter: url(..)，所以大概这就是问题所在。对于灰度解决方法怎么样：***.com/a/12173285/246342
感谢您的评论 Alex K.，实际上我已经尝试过您提到的解决方案，但结果是一样的。在这种情况下，我唯一的问题是使事情（动画）顺利进行，不幸的是，这在 FF 中不会发生
【参考方案1】：
我已经使用 SVG 进行了尝试。它不显示灰度图像，但在 Mozilla 上显示模糊效果，在所有其他浏览器中都可以正常工作。
代码如下：
CSS：
<style>
.svg-only-blur
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
.svg-only-blur:hover
-webkit-filter: grayscale(100%) brightness(140%) blur(4px);
-moz-filter: grayscale(100%) brightness(140%) blur(4px);
-o-filter: grayscale(100%) brightness(140%) blur(4px);
-ms-filter: grayscale(100%) brightness(140%) blur(4px);
filter: grayscale(100%) brightness(140%) blur(4px);
filter: url(#blur);
</style>
HTML：
<body>
<svg version="1.1" >
<defs>
<filter id="blur" x="0" y="0">
<feGaussianBlur stdDeviation="3" />
</filter>
</defs>
</svg>
<img src="1.jpg" class="svg-only-blur" >
</body>
希望对你有帮助。
【讨论】：
感谢您的贡献！实际上，我在我的初始代码中确实使用了 SVG，并根据需要实现了同时灰度 + 模糊的结果。问题是我希望过渡顺利/缓慢（就像在 Chrome 或 Safari 中一样）。在 FF 中，过渡发生得迅速而突然……以上是关于在 Mozilla FF 中不会发生过渡效果的主要内容，如果未能解决你的问题，请参考以下文章