為什么不應用CSS轉換？

Question

我已經構建了一個小的堆疊條形視覺，只是使用浮動divs ，下面使用knockout綁定到一些數據。 我希望能夠做的是在數據更改時動畫顯示這些堆棧大小的變化。

我已經設法在一般情況下做到了這一點，所以我已經有4個吧，其中3個正確轉換。 問題是我的最后一欄似乎忽略了過渡並立即重新調整大小，我無法理解為什么。 這是狀態之前/期間/之后的圖片：

我定義這種轉換的方式只是通過css

-webkit-transition: width 1s;
transition: width 1s;

條形的寬度是計算值，計算項目的百分比，因此每個條形的寬度應定義為百分比。 雖然紅色條的計算方式與其他3條不同，但我不明白為什么會影響過渡。

我覺得很奇怪，例如，如果我通過開發者控制台修改寬度，那么條形圖就會正確生成動畫。 我想知道是否有人可以建議為什么會出現這種情況？

 var vm = (function generateModel() { var data = { name: "Sign-off", id: "XX", values: [{ text: "Signed-off", count: 150, color: "#5fb5cc" }, { text: "Submitted", count: 90, color: "#75d181" }, { text: "Not Submitted", count: 75, color: "#f8a25b" } ], aggregates: { count: 650 } }; // Create a view model directly from the data which we will update var vm = ko.mapping.fromJS(data); // Add a computed value to calculate percentage vm.values().forEach(function (d) { d.percentage = ko.computed(function () { return d.count() / vm.aggregates.count() * 100; }); }); // Create a vm.allValues = ko.computed(function() { var values = []; var count = 0; var total = vm.aggregates.count(); debugger; // Add each of these results into those that will be returned vm.values().forEach(function(d) { values.push(d); count += d.count(); }); // Create an other category for everything else values.push({ text: ko.observable("Other"), count: ko.observable(total - count), percentage: ko.observable((total - count) / total * 100), color: ko.observable("#ff0000") }); return values; }); return vm; })(); ko.applyBindings(vm); setTimeout(function() { vm.values()[0].count(90); vm.values()[1].count(40); vm.values()[2].count(35); vm.aggregates.count(3550); }, 3000); 

 body { background: rgb(40, 40, 40); } .spacer { height: 230px; } .cards { float: right; } /* Small Card */ .card { margin-bottom: 3px; background: white; border-radius: 3px; width:398px; float: right; clear: both; min-height: 100px; padding: 10px 5px 15px 5px; font-family:'Open Sans', Arial, sans-serif; } .title { color: rgb(105, 161, 36); font-size: 16px; } .states { padding-top: 10px; } .state { font-size: 12px; color: rgb(67, 88, 98); padding: 0px 5px 2px 5px; clear: both; } .circle { width: 10px; height: 10px; border-radius: 50%; float: left; margin: 1px 5px 5px 0px; } .value { float: right; } .graph { padding: 10px 5px 0px 5px; } .bar { float: left; height: 10px; -webkit-transition: width 10s; transition: width 10s; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script> <div class="card"> <div class="content"> <div class="graph" data-bind="foreach: allValues"> <div class="bar" data-bind="style: { background: color, width: percentage() + '%' }"/> </div> </div> </div> 

Answer 1

由於前3個基於不更改的對象引用，因此knockout保留了已呈現的實際<div> 。

對於最終的條形，每次評估allValues ，它都會將一個全新的對象推送到返回的數組中。 我認為，因為knockout將其視為一個新對象，它會從頭開始重新渲染div，而不是更新現有綁定。

您需要稍微修改模型以保存最終值的實際對象，以便您可以以相同的方式更新其上的可觀察對象。

這是使用靜態對象作為“其他”值的固定版本：

 var vm = (function generateModel() { var data = { name: "Sign-off", id: "XX", values: [{ text: "Signed-off", count: 150, color: "#5fb5cc" }, { text: "Submitted", count: 90, color: "#75d181" }, { text: "Not Submitted", count: 75, color: "#f8a25b" } ], aggregates: { count: 650 } }; // Create a view model directly from the data which we will update var vm = ko.mapping.fromJS(data); // Add a computed value to calculate percentage vm.values().forEach(function (d) { d.percentage = ko.computed(function () { return d.count() / vm.aggregates.count() * 100; }); }); //Create a static "others" object vm.other = { text: ko.observable("Other"), count: ko.computed(function() { var total = vm.aggregates.count(); var count = 0; vm.values().forEach(function(d) { count += d.count(); }); return total - count; }), percentage: ko.computed(function(d, b) { var total = vm.aggregates.count(); var count = 0; vm.values().forEach(function(d) { count += d.count(); }); return (total - count) / total * 100; }), color: ko.observable("#ff0000") }; // Create a vm.allValues = ko.computed(function() { var values = []; var count = 0; var total = vm.aggregates.count(); debugger; // Add each of these results into those that will be returned vm.values().forEach(function(d) { values.push(d); count += d.count(); }); // and push static object in instead of creating a new one values.push(vm.other); return values; }); return vm; })(); ko.applyBindings(vm); setTimeout(function() { vm.values()[0].count(90); vm.values()[1].count(40); vm.values()[2].count(35); vm.aggregates.count(3550); }, 3000); 

 body { background: rgb(40, 40, 40); } .spacer { height: 230px; } .cards { float: right; } /* Small Card */ .card { margin-bottom: 3px; background: white; border-radius: 3px; width:398px; float: right; clear: both; min-height: 100px; padding: 10px 5px 15px 5px; font-family:'Open Sans', Arial, sans-serif; } .title { color: rgb(105, 161, 36); font-size: 16px; } .states { padding-top: 10px; } .state { font-size: 12px; color: rgb(67, 88, 98); padding: 0px 5px 2px 5px; clear: both; } .circle { width: 10px; height: 10px; border-radius: 50%; float: left; margin: 1px 5px 5px 0px; } .value { float: right; } .graph { padding: 10px 5px 0px 5px; } .bar { float: left; height: 10px; -webkit-transition: width 10s; transition: width 10s; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script> <div class="card"> <div class="content"> <div class="graph" data-bind="foreach: allValues"> <div class="bar" data-bind="style: { background: color, width: percentage() + '%' }"/> </div> </div> </div>