JSFiddle - React, Tailwind, and code Playground

by thebluenile

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.0/jquery.min.js"></script>
<div class="items" data-bind="foreach: { data: items, afterAdd: enterAnimation }">
    <div class="item" data-bind="text: $data">
    </div>
</div>

<button type="button" data-bind="click: addItem">
Add item
</button>

CSS

.flash {
  animation: flash 3s ease-out;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

JavaScript

function ViewModel() {
	var vm = this;
    
    vm.items = ko.observableArray([
    	'Item 1', 'Item 2'
    ]);
    
    vm.addItem = function () {
    	vm.items.push(`Item ${vm.items().length + 1}`)
    }
    
    vm.enterAnimation = function (element) {
    	$(element).css('background-color', 'red');
        window.setTimeout(() => {
			$(element).css('background-color', 'none');
        });
    }
}

ko.applyBindings(new ViewModel());