JSFiddle - React, Tailwind, and code Playground

by ExplosionPIlls

HTML

<h3>Animations</h3>
<div data-bind="foreach: { data: people, beforeRemove: animateOut }" style="padding: 5px;" class=person>
    <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);
}

JavaScript

function vm () {
    "use strict";
    var me = this;
    
    me.people = ko.observableArray([
        { "name": "Irma Olsen" },
        { "name": "Winifred Cabrera" },
        { "name": "Kelly Hurley" },
        { "name": "Fredericka Blackburn" },
        { "name": "Bruce Patel" },
        { "name": "Jamal House" },
        { "name": "Hasad Mathis" },
        { "name": "Abigail Cleveland" },
        { "name": "Samantha Mccullough" },
        { "name": "Aileen Jimenez" },
        { "name": "Brendan Taylor" },
        { "name": "Charissa Fuller" },
        { "name": "Chester Gaines" },
        { "name": "Amos Little" },
        { "name": "September Sparks" },
        { "name": "Linus Logan" },
        { "name": "Porter Case" },
        { "name": "Giacomo Drake" },
        { "name": "Sylvester Mcknight" },
        { "name": "Alfreda Irwin" },
        { "name": "Chase Alexander" },
        { "name": "Norman Delacruz" },
        { "name": "Colby Bond" },
        { "name": "Blair Webb" },
        { "name": "Lucius Howard" },
        { "name": "Hedda Santana" }
    ]);
    
    me.removePerson = function (person) {
        me.people.remove(person);
    };
    
    me.animateOut = function animateOut(node, i, person) {
        node.offsetHeight; // Fixes because browsers be crazy
        // Make sure it's not a text node
        if (node.nodeType == Node.ELEMENT_NODE) {
            node.addEventListener("transitionend", function () {
                this.parentElement.removeChild(this);
            });
            node.classList.add("remove");
        }
    }
}

ko.applyBindings(new vm());