knockoutjs new li background fadeout

by andrew rowe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<ul data-bind="foreach: { data: myItems, afterAdd: yellowFadeIn }">
    <li data-bind="text: $data"></li>
</ul>
 
<button data-bind="click: addItem">Add</button>
 
<script type="text/javascript">
    ko.applyBindings({
        myItems: ko.observableArray([ 'A', 'B', 'C' ]),
        yellowFadeIn: function(element, index, data) {
        console.log(element);
            element.nextSibling.style.background = 'red';
            setTimeout(()=>
                      $(element).css({"transition": '3s', "background":""}), 2000)
        },
        addItem: function() { this.myItems.push('New item'); }
    });
</script>