javascript - 过渡期不当行为

Question

我有几个关于转换行为的问题，它们可能是同一个问题。具有短过渡的第一类问题。

<style>
.someclass {
    transition: all 1s linear;
}
</style>
<script>
function activationcode()
{
    //$('.someclass').hide(); was in display none state.
    $('.someclass').css('opacity', 0);
    $('.someclass').show();
    $('.someclass').css('opacity', 1);
}
</script>

添加在大多数情况下此代码无法按预期工作。 .someclass 项出现在最终状态。变化的属性并不重要，opacity 只是举例。为了让它工作，有两件事有帮助:a) 改变 all 以转换到特定属性，对于这个例子到 opacity； b) 延迟调用 $('.someclass').css('opacity', 1);，例如 100 毫秒。但这只会将问题的概率降低到非常低的值，并不能解决问题。

第二类问题是长动画。它可以工作，但是如果你把它放在选项卡(或类似的东西)中，并且会开始从动画选项卡切换到另一个选项卡，动画可能会在指定时间之前以最终状态完成。单次切换/切换回来通常不会破坏动画。但是两个或更多开关很有可能会发生这种情况。

我可以在 Firefox 上重现这个(不是最近)。最初是针对 Chrome 的报道(记者声称他使用的是最后一个版本)。

我怀疑问题确实取决于页面上 css/js 事件的数量(无法使用最少的 jsfiddle 重现第二个问题)。

那么问题是如何解决这些问题，是否存在解决方案？

Answer 1

放线...

$('.someclass').css('opacity', 1);

...在 setTimeout(fn, 0) 中。这将延迟其执行，确保浏览器不会将这些步骤优化为一次绘制(以 100% 不透明度显示元素)。