Javascript 带有转换的隐藏元素有时不转换？

单击submit按钮后，我需要获得以下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。有时它加载并发生转换，有时它只是直接加载到它应该达到的百分比。它应该每次都有动画，在不改变代码的情况下，我会得到不同的结果，就像比赛条件一样，所以很难一致地再现。然而，我在这里阅读了其他答案，因此DOM操作是同步的。所以我不明白为什么有时它有效，有时却无效

如果你能解释一下这里发生的一切，我将不胜感激。也许在显示属性更改之前，有时会触发检查是否需要应用转换的内容，这就是为什么它有时不会转换？我不知道到底是什么检查DOM元素是否被更改并应用CSS转换

---

更新：它甚至可以与0ms

setTimeout

一起工作，在将包装器更改为显示为块后，它封装了进度条更新-无法在fiddle上复制，因为它看起来在那里运行较慢。

您可以发布您的getJSON函数吗？您是否已将jQuery代码置于

done

回调方法中？我试图复制一个呼叫延迟，但在这里它的工作。所以我的问题是：在调用progress函数之前，您确定要保存所有json数据吗@里塞达诺编辑了我的帖子。我肯定什么都有