knockout.js - 我遇到了 knockout 的 beforeRemove 回调和 CSS 转换问题

Question

我正在使用 foreach 绑定(bind)和 beforeRemove 回调，以便为我的列表项的删除设置动画。当我移除之前移除的项目上方的项目时，它工作正常，但是当我尝试移除之前移除的项目下方的项目时，转换无法正常工作。

这是一个说明我的问题的 jsfiddle:http://jsfiddle.net/tylerweeres/2szjxzs0/2/

HTML

<h3>Animations</h3>
<div data-bind="foreach: { data: people, beforeRemove: animateOut }">
    <div style="padding: 5px;" class="person">
        <span data-bind="text: name" style="display: inline-block; width: 200px;"></span>
        <button style="padding: 5px 15px;" data-bind="click: $parent.removePerson">Remove</button>
    </div>
</div>

CSS

.person {
    font-family: georgia;
    padding: 5px;
    transition: all 600ms ease-in-out;
    transform-origin: 75px;
}

.person.remove {
    transform: translateX(2000px) rotateZ(540deg);
}

JS

function vm () {
    "use strict";
    var me = this;

    me.people = ko.observableArray([
        { "name": "Irma Olsen" },
        { "name": "Winifred Cabrera" },
        // ...
        { "name": "Lucius Howard" },
        { "name": "Hedda Santana" }
    ]);

    me.removePerson = function (person) {
        me.people.remove(person);
    };

    me.animateOut = function animateOut(node, i, person) {
        // Make sure it's not a text node
        if (node.nodeType == Node.ELEMENT_NODE) {
            node.classList.add("remove");
        }
    }
}

ko.applyBindings(new vm());

Answer 1

这是一个奇怪的问题，但我认为这与疯狂的浏览器渲染逻辑有关。您需要强制进行未发生的重绘。在某一时刻，我们有:

<div class="person remove">
<div class="person">

然后我们去

<div class=person>
<div class=person>

相同的 div 没有 remove不再类——当我们添加 remove类，Knockout 删除数据，但浏览器不知道更新此 div，因此它不执行转换，这意味着 transitionEnd不会触发，div 也不会被删除。

那么我们如何强制重绘呢？ Obviously by calling node.offsetHeight (一个有效的表达)。

http://jsfiddle.net/ExplosionPIlls/2szjxzs0/6/

我相信有人可以更 Eloquent 地解释它是如何工作的以及为什么需要这样做，但至少它应该解决你眼前的问题。