Question

单击提交按钮后，我具有以下获取JSON的条件，其中temperature是其他列出的元素的div包装器：

$.getJSON("lookup.php?id=" + v, function(data) {
    var items = {};
    $.each(data, function(key, val) {
        items[key] = parseFloat(val.replace(/\$|,/g, '')).toFixed(2);
    });
    console.log(items);
    if (items["goal"] != null) {
        $('#progress').on('webkitTransitionEnd transitionend', function(e) {
            console.log(e);
        });
        $("#goal").text("Goal: " + "$" + items["goal"]);
        $("#temperature").css("display", "block");
        $("#progress").css("width", items["total"] / items["goal"] * 100 + "%");
        $("#pct").text(items["total"] / items["goal"] * 100 + "%");
        $("#raised").text("$" + items["total"]);
    }
});

此代码位于jQuery getJSON函数内部。并且温度应该像筹款活动温度条一样进行动画处理。

这是该元素的CSS的内容：

#progress {
  float: left;
  transition: width 6s;
  width: 0%;
  height: 20px;
  background: #FF5D50;
  z-index: 333;
}

我在转换中得到的结果不一致（我知道我也应该添加其他浏览器CSS转换）。我正在使用Chrome。有时会加载并发生过渡，有时会直接加载到应达到的百分比。每次都应该进行动画处理，并且不对代码进行任何更改，我会得到不同的结果，例如它是一个竞争条件，因此很难一致地进行复制。但是，我从SO的其他答案中了解到DOM操作是同步的。所以我不明白为什么有时它会起作用而不能。

对于这里发生的一切解释，我将不胜感激。也许在显示属性更改之前有时触发了检查是否需要应用过渡的检查，这就是为什么有时不过渡的原因？我不知道究竟该如何检查DOM元素是否更改并应用CSS过渡。

更新：即使使用0ms setTimeout，它也可以在更改包装器以显示为块后封装进度条更新的情况下运行-无法在小提琴上重现，因为它看上去运行得很慢。

带有过渡的隐藏元素有时不过渡？

0 个答案: