过渡不当行为

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);，例如100ms。 但这只会将问题的概率降低到非常低的值，并不能解决问题。

第二类问题是长动画。它可以工作，但如果你把它放在选项卡（或类似的东西）内，并开始从动画选项卡切换到另一个，动画可能会在指定时间之前以最终状态完成。单次切换/切换回通常不会破坏动画。但是两个或更多开关发生的概率非常高。

我可以在 Firefox 上重现这个（不是最近的）。最初是为 Chrome 报道的（记者称他使用的是最后一个版本）。

我怀疑问题确实取决于页面上的 css/js 活动量（无法用最少的 jsfiddle 重现第二个问题）。

所以问题是如何解决这些问题，是否存在任何解决方案？

Answer 1

放置线...

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

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

Answer 2

我建议您改用类并仅在 CSS 中处理显示/隐藏

.hide {
    display: none;
    opacity: 0;
    transition: opacity 1s linear 0s, display 0s linear 1s;
    /* decrease opacity, then change display with a delay */
}
.show {
    display: block;
    opacity: 1;
    transition: display 0s linear 0s, opacity 1s linear 0s;
    /* change display instantly without delay, then increase opacity */
}

通过将隐藏延迟 1 秒，您可以在隐藏之前完成不透明度过渡。 但是我们重置了放映的延迟，因为我们需要人们看到不透明度的增加。