JSFiddle - React, Tailwind, and code Playground

by jwerre

HTML

<div id="flexbox">
    <div class="flexed"></div>
    <div class="flexed" id="remove-me"></div>
    <div class="flexed"></div>
</div>

CSS

#flexbox {
    display: flex;
    flex-flow: row;
}

.flexed {
    background: grey;
    /* The border seems to cause drawing artifacts on transition. Probably a browser bug. */
    /* border: 1px solid black; */
    margin: 5px;
    height: 100px;
    flex-grow: 1;
    transition: flex-grow 1000ms linear;
}

.removed {
    /* Setting this to zero breaks the transition */
    flex-grow: 0.00001;
}

JavaScript

var nodes = $('.flexed');
nodes.on('click', function (evt) {
    this.classList.add('removed');
});

nodes.on('webkitTransitionEnd', function (evt) { this.remove(); });