JSFiddle - React, Tailwind, and code Playground

by lelandrichardson

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul data-bind="template: {
    name: 'li_tmpl',
    foreach: items
}">

</ul>

<script id="li_tmpl" type="text/html">
    <li style="display:none;" data-bind="animateIn: 'ease'">
        <div>This is a big div with a lot of text</div>
        <div>This is a big div with a lot of text</div>
        <div>This is a big div with a lot of text</div>
        <div>This is a big div with a lot of text</div>
        <div>This is a big div with a lot of text</div>
    </li>
</script>

JavaScript

ko.bindingHandlers.animateIn = {
    init: function(element, valueAccessor, allBIndingsAccessor, viewModel, context){
        if(!viewModel.hasBeenRenderedOnce){
            viewModel.hasBeenRenderedOnce = true;
            $(element).slideDown(ko.utils.unwrapObservable(valueAccessor()) || 400);
        }
    }
}

var viewModel = {
    items: ko.observableArray([])
};
ko.applyBindings(viewModel);

setInterval(function(){
    viewModel.items.unshift({});
},1000);