0

首先请原谅我的英语不好，我是法国人。我会尽力而为！我今天在这里，因为我第一次找不到我的问题的答案。星期一我需要展示一个网站的演示，我开始恐慌！

所以，我有一个带有rotate (45deg). 在这个 div 中，我在 inline-block 中有两个 div 其他 div （带有 css 旋转（-45deg）。左边我有一个滑块，右边有一个文本和快捷方式。今天我将滑块加入到左侧位置（我在 joomla 上工作）。它工作得很好，但我的幻灯片过渡有问题。如果我点击“下一个”或“上一个”，全局 div（主容器）在过渡期间变得模糊。我做了截图正确位置上的文本（最好看到差异）。

小提琴例如：

http://jsfiddle.net/asakuras/8Pk3S/11/

图片例如：

在点击之前和点击之后，在过渡期间：

http://www.morgann-c.com/tools/js/bug.jpg在此处输入图像描述

说明：

我测试了很多可能性来清理它，但目前没有解决方案。在脚本（responsiveslides.js）中，过渡是通过不透明度减少的。在脚本的第 71 行有 opacity 的配置：

visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1, }

如果我将隐藏类的不透明度更改为0，则没有过渡，但错误消失了！我认为这是 CSS 的不透明度过渡的问题。如果我删除所有 div 的旋转，错误也会消失。我测试了所有的 CSS 转换，但没有结果......

我正在处理这个错误 3 天，快速找到解决方案对我来说非常重要......我恳求你，如果有人已经遇到这个问题，我会接受！

祝您周末愉快，并在此先感谢您...

编辑 //// ：

Firefox 30：点击时“模糊”
Chrome 35.0.1916.153：页面加载时到处“模糊”
IE 11：没有问题，没有“模糊”，一切正常！

4

1 回答 1

0

首先，您错过了一个-in -ms-transform（这可能是 IE 中没有模糊的原因 - 它没有使用transform）

其次，删除-webkit-backface-visibility它使 Chrome 只在过渡时模糊（我不知道你为什么添加它，因为根本没有旋转）。

第三，除非您使用的是 IE8- 或类似的东西，您不需要filter轮换并且-o-transform不需要-moz-transform ，所以删除它们

最后，它之所以模糊是因为它是由 GPU 渲染的。虽然这在 GPU 生成事物时总是会发生，但我认为它只是因为除了不透明度过渡之外还有两个旋转而过度劳累。

因此，作为一种解决方案，您有几个选择。您可以删除不透明度过渡，选择类似的东西margin-left:-600px（这需要更改插件以适应），您可以将标题和段落移到外部<div id="global">但将其放置在与当前位置相同的位置（确保没有在旋转的正方形之外），或者，我个人最喜欢选择另一个插件！你使用的那个已经过时了，而且有很多更好的免费的，只要谷歌搜索一下

于 2014-06-14T01:40:05.407 回答