过渡行为不端

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秒，您可以在隐藏之前完成不透明度转换。 但是我们重新设置了显示的延迟，因为我们需要人们看到不透明度增加。