0

我遇到了一个非常烦人的错误，它出现在 Mac 上的 Safari 5.1 中。由于这个浏览器仍然很常见，我需要支持它。

JSFiddle：http: //jsfiddle.net/QCvZt/2/

单击按钮时，将向包含元素添加一个类#chance。样式表有规则，然后使单击的元素#chance-loose-card立即以动画方式离开，然后在延迟后以#chance-card动画方式进入。

它们淡出并用 淡入，当它们完全透明时opacity我翻转为隐藏，因为在完整的站点中，它们可能会超出事物的顶部并捕获针对下面元素的点击。visibility

这在 Firefox 和 Chrome（以及 Safari 6）中运行良好。

但在 Mac 上的 Safari 5.1 中，第一个动画按预期发生，但随后#chance-card没有出现。直到我将鼠标悬停在#carousel元素上（大概是因为它触发了另一个过渡——一个淡入的按钮），#chance-card它才出现。

现在，鉴于我假设它与触发另一个转换有关，我尝试通过 JavascriptsetInterval翻转元素上的类，使其来回转换，从而强制转换每秒发生一次。但这并没有解冻过渡并使其#chance-card出现。转换 atransform: translate而不是margin-lefton#chance-card也无济于事。

如 JSFiddle 中所述，减少transition-delayon#chance-card确实会使错误消失，但对于我的用例来说，这不是一个可接受的解决方案。

我想知道是否有人可以提出任何解决方法？在我的搜索中，我没有找到任何听起来相似的东西。

4

1 回答 1

0

我找到了解决办法！

http://jsfiddle.net/QCvZt/4/

将属性更改为transition-delay小于visibility其他属性的延迟可以解决此问题。所以看起来如果转换被延迟，如果visibility是hidden在转换开始的时间（即使它会在同一时刻翻转到可见），转换不会开始直到以某种方式触发（就像在这种情况下使用鼠标在灰色区域，虽然我不知道确切的机制）。翻转visibility到visible其他转换即将开始之前会使问题消失。

在这种情况下，我更改了它（省略了供应商前缀）

#chance.state-chancecard #chance-card {
    transition: transform 0.5s, opacity 0.1s, visibility 0s;
    transition-delay: 0.5s, 0.5s, 0.5s;
    transition-timing-function: ease-out;
    transform: none;
    opacity: 1;
    visibility: visible;
}

对此

#chance.state-chancecard #chance-card {
    transition: transform 0.5s, opacity 0.1s, visibility 0s;
    transition-delay: 0.5s, 0.5s, 0.49s; /* flip visibility just before other transitions are to start */
    transition-timing-function: ease-out;
    transform: none;
    opacity: 1;
    visibility: visible;
}
于 2013-09-12T18:49:11.317 回答