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>
<h1> Cross fade: </h1>
<div data-bind="cloneAndFade: counter">
    <div class="box" data-bind="style: { background: randomColor }">
        <h1 data-bind="text: counterText"> ... </h1>
    </div>
</div>

CSS

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

JavaScript

ko.bindingHandlers.cloneAndFade = {
    init: function(element, valueAccessor) {
        var subscribe = valueAccessor();
        if (!ko.isSubscribable(subscribe)) {
            throw new Error("Must be subscribable");
        }
        
        subscribe.subscribe(function(newValue) {
            cloneAndFade(element);
        }, null, "beforeChange");
        
    }
};
function cloneAndFade(element) {
        var clone = element.clone();
        clone.setStyles({
            'position': 'absolute'
        });
        element.grab(clone, 'before');
        clone.fade('out').get('tween').chain(function() {
            clone.destroy();
            this.callChain();
        });
        element.fade('hide').fade('in');
}






var viewModel = {
    counter: ko.observable(0)
};
viewModel.randomColor = ko.computed(function(){
    var colors = [
    'hsl(0, 100%, 95%)'
    ,'hsl(60, 100%, 95%)'
    ,'hsl(120, 100%, 95%)'
    ,'hsl(180, 100%, 95%)'
    ,'hsl(240, 100%, 95%)'
    ,'hsl(300, 100%, 95%)'
    ];
    return colors[viewModel.counter() % colors.length];
});
viewModel.counterText = ko.computed(function() {
    var texts = [
        "Bacon ipsum"
        ,"dolor sit amet"
        ,"steak sirloin brisket pulled pork"
    ];
    return texts[viewModel.counter() % texts.length];
}, viewModel);


ko.applyBindings(viewModel);
setInterval(function(){ 
    viewModel.counter(viewModel.counter()+1);
}, 1000);