JSFiddle - React, Tailwind, and code Playground

by ScottRippey

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mootools/1.4.5/mootools-core-full-compat-yc.js"></script>
<div class="box" data-bind="cloneAndFade: selectedIndex">
    <span data-bind="text: currentText">...</span>
</div>

CSS

.box {
    background: hsl(210, 100%, 95%);
    width: 150px; height: 150px;
    padding: 10px; margin: 10px;
    border-radius: 10px;
    border: 1px solid hsl(210, 100%, 50%);
}

JavaScript

ko.bindingHandlers.cloneAndFade = {
    update: function(element, valueAccessor) {
        //element.set('text', valueAccessor()());
    }
};



var viewModel = {
    selectedIndex: ko.observable(0)
};
viewModel.currentText = ko.computed(function() {
    return "Current: " + (this.selectedIndex() + 1);
}, viewModel);
viewModel.next = function() {
    var next = (this.selectedIndex() + 1) % 100;
    this.selectedIndex(next);
};


ko.applyBindings(viewModel);
setInterval(function(){ viewModel.next(); }, 1000);