JSFiddle - React, Tailwind, and code Playground

HTML

<button id="fire">fire at will</button>

<ul id="container">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
</ul>

SCSS

.is-transparent {
    opacity: 0;
}

#container {
    li {
        -webkit-transition: opacity 2.3s;
        -moz-transition: opacity 2.3s;
        transition: opacity 2.3s;
        &.is-transparent {
            opacity: 0;
        }
    }
}

JavaScript

function runner() {
    var container = document.getElementById('container');
    var newItem = document.createElement('li');

    // item attrs
    newItem.innerText = 'test Above';
    newItem.classList.add('is-transparent');

    // do work
    container.insertBefore( newItem, container.firstElementChild );

    // transition opacity (ideally)
    window.setTimeout(function(){
        newItem.classList.remove('is-transparent');
    }, 0);
}

$('#fire').on('click', function() {
    runner();
});