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中的show / hide

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

过渡不端行为

2 个答案: